Question

玩knockout.js，我仍然没有真正掌握底层逻辑。在下面的示例中，静态javascript数组boxList没有对viewModel的任何引用，实际上它是完全为空的。仍然，foreach绑定没有困难掌握阵列。为什么呢？

注意：显然，绑定仅在调用ko.applyBindings时有效，并且以viewModel为空参数。

HTML：

<div data-bind="foreach : boxList">
            <div><input type="checkbox" ><label data-bind="text: name"></label></div>
        </div>

JS：

 var viewModel = {

    };

  var boxList = [
            { name : 'n1'},
            { name : 'n2' },
            { name : 'n3'},
            { name : 'n4' },
        ];


   ko.applyBindings(viewModel);

JSFiddle：http://jsfiddle.net/e85sLmk4/

Answer 1

在foreach: boxList的情况下，绑定表达式是有效的Javascript表达式，即访问全局变量boxList。因此Knockout能够解析变量并为其渲染复选框。

var viewModel = {

 };

 var boxList = [{
   name: 'n1'
 }, {
   name: 'n2'
 }, {
   name: 'n3'
 }, {
   name: 'n4'
 }, ];


 ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach : boxList">
  <div>
    <input type="checkbox">
    <label data-bind="text: name"></label>
  </div>
</div>

如果您在foreach绑定或$root或$data上下文中使用了该绑定，则必须在视图模型下包含这些变量。因此，如果未在视图模型中声明变量foreach : $root.boxList，则boxList之类的绑定表达式将无效。

var viewModel = {

 };

 var boxList = [{
   name: 'n1'
 }, {
   name: 'n2'
 }, {
   name: 'n3'
 }, {
   name: 'n4'
 }, ];


 ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach : $root.boxList">
  <div>
    <input type="checkbox">
    <label data-bind="text: name"></label>
  </div>
</div>

Knockout js - 为什么绑定工作时没有任何对viewModel的引用

1 个答案: