淘汰ViewModels

Question

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

即。数据绑定= “MyGlobalSingleton.Prop”

Answer 1

是的，你可以，但你绑定的属性需要是你对象中的Knockout observable。否则你将无法使用双向绑定的好处。

Answer 2

Knockout的绑定包含在与其他任何javascript一样执行的函数中。由于绑定也包含在with标记中，因此将在以下位置搜索您在绑定中使用的任何属性：

1. 首先，在当前上下文中（通常是“viewmodel”）
2. 然后，在Knockout自己的bindingContext对象中（$data引用（1），其他方便的$ - 前缀属性如$parent可在此处获得）
3. 最后，在全局命名空间中。在浏览器中主要是：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>

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

更安全的方法可能是：

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