Knockout.js

Question

我正在按照 this answer 上建议的方法来处理多个 viewModel 并在我页面的不同部分使用它们。

一些视图模型将用于页面的多个部分和不同的元素，所以我不喜欢使用 the second suggested solution，它建议将视图模型应用于某些 DOM 元素。

所以我有这样的东西：

window.masterVM = {
    vmA : new VmA(),
    vmB : new VmB(),
    vmC : new VmC(),
}

ko.applyBindings(masterVM, $(':root').get(0));

现在，在我的 HTML 上，我做了这些事情：

<div data-bind="click: masterVM.vmA.demo">Click</div>
<div data-bind="click: masterVM.vmC.demo">Click</div>

这使得任何想通过以下方式执行这些方法的人都可以在 window 对象中访问它：window.masterVM.vmC.demo().

有没有办法隐藏它并以一种从外部无法访问的方式封装它？

Answer 1

不确定这是否是您要查找的内容，但您可以简单地传递一个匿名对象。

例如：

var VmA = function () { this.demo = _ => console.log('VmA'); }
var VmB = function () { this.demo = _ => console.log('VmB'); }
var VmC = function () { this.demo = _ => console.log('VmC'); }

ko.applyBindings({
    vmA : new VmA(),
    vmB : new VmB(),
    vmC : new VmC(),
}, $(':root').get(0));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-bind="click: vmA.demo">ClickA</div>
<div data-bind="click: vmC.demo">ClickC</div>

Answer 2

对象 masterVM 引用是您的视图模型。在绑定的上下文中，您将始终可以通过 $root 绑定上下文访问根视图模型。

您的绑定可以是：

<div data-bind="click: $root.vmA.demo">Click</div>
<div data-bind="click: $root.vmC.demo">Click</div>

那么你就可以不用全局变量了。

Knockout.js - 封装视图模型并从外部隐藏它们

Knockout.js - Encapsulate View Models and hiding them from outside

knockout-3.0