首页 文章

Knockout js，绑定上下文和视图模型非常混乱

提问于
浏览 次
0

当我用视图绑定视图模型时，

HTML

<div data-bind="text: $data.name"></div>

JavaScript的

var viewModel = {
    name: ko.observable('Steve')
};

ko.applyBindings(viewModel);

div显示了Steve的名字 . 绑定上下文包含$ data属性，它在viewModel中绑定名称，其中$ data引用div元素 . 我明白那个 . 但我不明白的是，当我在div标签中的data-bind中删除$ data时，它仍然有效 . 如果没有$ data，这个名称是不是直接在名为“name”的绑定上下文中引用了一个不存在的属性？在$ data不存在的情况下会发生什么？

knockout.js

2 回答

  • 2

    它的工作原理是因为knockout使用 with 块 . 你的 text 绑定的返回值包含在：

    "with($context){with($data||{}){return{" + bindingValue + "}}}";

    如你所见in the source .

    这段代码意味着将首先搜索您的viewmodel属性 . 如果某个属性不存在，则knockout将检查它是否在绑定上下文中 .

    这是一个如何工作的例子：

    var vm = {
  vmProp: 'VMPROP'
};

var bindingCtx = {
  $ctxProp: 'CTXPROP',
  $data: vm
};

function log() {
  with(bindingCtx) {
    with($data) {
      console.log(vmProp);       // Works
      console.log($ctxProp);     // Also works
      console.log($data.vmProp); // Also works
    }
  }
}

log();
    回复于
  • 0

    根据documentation . 如果第二个参数不存在于 ko.applyBindings ，则当前上下文中的viewModel对象将应用于body标记 . 这是因为你没有包含第二个参数，即 rootNode 为applyBindings . 它导致将 $data 应用于 body 标记 . 因此，您可以在 body 标记内的任何位置使用 viewModel properties 和 functions .

    回复于

相关问题