KnockoutJS 调用 observable 属性答案

【问题标题】：KnockoutJS calling observable propertiesKnockoutJS 调用 observable 属性
【发布时间】：2017-11-07 04:57:16
【问题描述】：

在 KnockoutJS 中，为什么我们需要将视图模型的 observable 成员调用为函数，例如在下面的 sn-p 中检索 currentProfit 的值时称为 currentProfit ()。任何指针都会有所帮助。

谢谢

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

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

【问题讨论】：

这里解释：knockoutjs.com/documentation/observables.html
并不是所有的浏览器都支持 JavaScript 的 getter 和 setter（*咯* IE *咯*），所以为了兼容性，ko.observable 对象实际上是函数。要读取 observable 的当前值，只需调用不带参数的 observable。在这个例子中，myViewModel.personName() 将返回 'Bob'，而 myViewModel.personAge() 将返回 123。上面的摘录回答了我的疑问，谢谢 mate

标签： knockout.js observable

【解决方案1】：

我看到您已经发现 why 淘汰赛使用它所做的模式，但如果可以更改它可能会很有趣。尤其是因为主要原因是为了支持旧版浏览器。

这里快速探索如何在get 和set 中使用observable 的默认方法。如果您愿意，我相信您可以将其扩展为也使用 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;

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"&gt;&lt;/script&gt;

【讨论】：