KnockoutJS调用可观察的属性

Posted 2021-05-05

在KnockoutJS中，为什么我们需要将视图模型的可观察成员作为函数调用，例如在下面的代码片段中，同时检索currentProfit的值被称为currentProfit（）。任何指针都会有所帮助。

谢谢

var viewModel = {
        currentProfit: ko.observable(150000)
    };

 viewModel.profitStatus = ko.pureComputed(function() {
        return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
    }, viewModel);

答案

我看到你已经发现why淘汰赛使用它所做的模式，但探索它是否可以改变可能会很有趣。特别是因为主要原因是支持旧浏览器。

这里有一个快速探索如何在observable和get中使用set的默认方法。如果你愿意的话，我相信你能够将它扩展到使用ko.computeds（typeof model[prop] === "function"）和ko.observableArrays（Array.isArray(model[prop])）。

如果有人对Object.defineProperty有更多的了解以及如何使subscribe和其他方法可访问，请随时添加到这个答案/评论。就个人而言，我对支持这种语法的新版淘汰赛非常感兴趣:)

const viewModel = {
  currentProfit: 1500
};

const makeObsGetSet = (model, prop) => {
  const innerObs = ko.observable(model[prop]);
  
  Object.defineProperty(model, prop, {
    get: innerObs,
    set: innerObs
  });
  
  return model;
};

// Mutate the vm to have obs. property
makeObsGetSet(viewModel, "currentProfit");

console.log("get without ():", viewModel.currentProfit);

// Subscribe to show it worked:
// (if anybody knows of an easier way to make subscribe 
// accessible from the outside, let me know!)
Object.getOwnPropertyDescriptor(viewModel, "currentProfit").get.subscribe(
    v => console.log("New currentProfit value:", v)
);

// Write using `= 2000` instead of `(2000)`
viewModel.currentProfit = 2000;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

以上是关于KnockoutJS调用可观察的属性的主要内容，如果未能解决你的问题，请参考以下文章

将 KnockoutJS 可观察数组传递给 HTTP Post 控制器方法的 AJax 调用失败

Knockoutjs：一些可观察的绑定但在 Safari 中不可见

Knockout JS，如何在更改可观察数组中的值时更改样式属性

KnockoutJS - 可观察对象的可观察数组，包含来自 SQL 服务器的数据

Knockoutjs ，取消可观察更新

使用可观察数组进行 Knockoutjs 映射和验证