淘汰视图模型答案

【问题标题】：Knockout ViewModels淘汰视图模型
【发布时间】：2016-08-08 21:32:19
【问题描述】：

在淘汰赛中，我可以将数据绑定放入不是视图模型的对象吗？我正在尝试为整个页面提供通用设置或主题相关值。我不想将它们添加到每个视图模型中。

即data-bind="MyGlobalSingleton.Prop"

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

是的，您可以，但是您要绑定的 Property 需要是您的对象中的可观察到的 Knockout。否则您将无法使用双向绑定的优势。

【讨论】：

谢谢你我猜到了

【解决方案2】：

Knockout 的绑定被包装在函数中，这些函数就像任何其他 javascript 一样执行。因为绑定也包含在with 标记中，所以您在绑定中使用的任何属性都将在以下位置搜索：

首先，在当前上下文中（通常是“视图模型”）
然后，在 Knockout 自己的bindingContext 对象中（$data 指的是（1），其他方便的$ 前缀属性如$parent 在这里可用）
最后，在全局命名空间中。在浏览器中主要是：window

这为您提供了很多存储内容的选择，但您需要注意重复使用属性名称时会发生什么。一些例子：

window.myProp = "I'm in window";
// We could also use `var notUsedInVM` here because
// this is executed in window scope
window.notUsedInVM = "I'm ONLY in window";

var SubViewModel = function() {
  this.myProp = "I'm in a sub view model";
};

var RootViewModel = function() {
  this.myProp = "I'm in the root view model";

  this.subVM = new SubViewModel();
};

ko.applyBindings(new RootViewModel());

div {
  border: 1px solid black;
  padding: .5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>
  <p>
    Window prop: <strong data-bind="text: window.myProp"></strong>
  </p>
  <p>
    My prop: <strong data-bind="text: myProp"></strong>
  </p>
  <p>
    Sub prop: <strong data-bind="text: subVM.myProp"></strong>
  </p>

  <div data-bind="with: subVM">
   <p>
    Window prop: <strong data-bind="text: window.myProp"></strong>
  </p>
    <p>
    Unique window prop: <strong data-bind="text: notUsedInVM"></strong>
  </p>
  <p>
    My prop: <strong data-bind="text: myProp"></strong>
  </p>
  <p>
    Root prop: <strong data-bind="text: $root.myProp"></strong>
  </p>

  </div>
</div>

这意味着您可以轻松地在 window 中定义一个静态对象并在整个嵌套数据绑定上下文中访问它，只要您不在视图模型中使用相同的属性名称。

更安全的方法可能是：

将设置（的子集）传递给与其相关的视图模型
将设置存储在根视图模型中并使用$root.MySettings 绑定到它们

【讨论】：