knockoutjs - 在 foreach 绑定中访问 $parent/$root答案

【问题标题】：knockoutjs - accessing $parent/$root inside foreach bindingknockoutjs - 在 foreach 绑定中访问 $parent/$root
【发布时间】：2016-11-08 11:32:35
【问题描述】：

Here 是我正在处理的一个 plunker 代码。我已经定义了一个看起来像这样的虚拟机。

    var employee = function(fname,lname){
    var self= this;
    self.fname = ko.observable(fname);
    self.lname = ko.observable(lname);
    self.selectedElement = ko.observable('Default Value');
  }

  var vm = function(){
      var self = this;
      self.employees = new ko.observableArray([]);
      self.selectedElement = ko.observable(-1);

      var e1 = new employee('f1','l1');
      var e2 = new employee('f2','l2');
      self.employees.push(e1);
      self.employees.push(e2);
  };

  ko.applyBindings(vm,container);

我显示员工列表的代码是

<body id="container">
<h1>Empoyees</h1>
<div>
  <div data-bind="foreach: employees">
    <h4 data-bind="text: 'Employee' + $index()"></h4>
    <span>First Name :</span>
    <span data-bind="text: fname"></span>
    <br/>

    <span>Last Name :</span>
    <span data-bind="text: fname"></span>
    <br/>

    <span data-bind="text: selectedElement()"></span>
    <!-- I want to access parents 'selectedElement' i.e. vm.slectedElement() -->
    <!--I tried below code but its causing binding error.-->
    <!-- <span data-bind="text: $parent.selectedElement()"></span> -->
    <br/>
  </div>
</div>

注意 lass 'employee' 和主视图模型 'vm' 都具有相同的属性，名为 (selectedElement)

现在在 foreach 绑定中，我试图访问根/父上下文的“selectedElement”属性，但因为我在 foreach 中，所以我正在访问“员工”类的“selectedElement”属性。

我尝试使用 $root 和 $parent 关键字来访问父元素属性，但它导致绑定错误。

我错过了什么吗？ Here又是plunker链接。

【问题讨论】：

标签： knockout.js knockout-2.0 knockout-3.0

【解决方案1】：

您从未创建根视图模型的实例。将初始调用更改为

ko.applyBindings(new vm(),container);

https://plnkr.co/edit/wRKfnJi9Jl9Rj2unbgQp?p=preview

当您这样做时，$root 或 $parent 将按预期工作。

【讨论】：

感谢@Jamiec 的快速回复。但是，我仍然在摸不着头脑，为什么其他所有东西（除了 $root/$parent ）都可以在没有实例化我的视图模型对象的情况下工作。可能是我不懂基础。你能解释一下吗？
@user2243747 敲除将接受直接函数作为视图模型，但当您这样做时，this 可能指的是窗口对象。它会混淆运行时视图模型的层次结构，所以像 $root 和 $parent 这样的东西可能指向错误的地方。