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

Question

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

某些视图模型将在页面的多个部分和不同的元素中使用，因此我不希望使用建议将视图模型应用于某些DOM元素的the second suggested solution。

所以我有这样的东西：

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.masterVM.vmC.demo()来执行那些方法的任何人都可以在window对象中访问它。

是否有任何方法可以隐藏它并以无法从外部访问的方式封装它？

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>

然后您可以摆脱使用全局变量的麻烦。