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

Posted 2023-02-22

【中文标题】Knockout.js - 封装视图模型并从外部隐藏它们

【英文标题】：Knockout.js - Encapsulate View Models and hiding them from outside

【发布时间】：2020-09-05 08:51:15

【问题描述】：

我遵循this answer 建议的方法来处理多个视图模型并在我页面的不同部分使用它们。

某些视图模型将用于页面的多个部分和不同的元素，因此我不喜欢使用建议将视图模型应用于某些 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()。

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

【问题讨论】：

如果您正在寻找我建议之外的其他内容，请给我留言。

【参考方案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>

【参考方案2】：

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

您的绑定可能是：

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

那么你就可以摆脱对全局变量的使用了。