Question

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

由于

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

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

Answer 1

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

以下是对如何在observable和get中使用set默认方法的快速探索。如果您愿意，我相信您也可以将其扩展为使用ko.computed s（typeof model[prop] === "function"）和ko.observableArray s（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调用可观察的属性

1 个答案: