Knockout - Foreach 绑定 - 如何在 HTML 中反映更新值

Question

我有一个 observableArray 变量，它有如下数组：

self.EmployeeNames = ko.observableArray([]);
self.EmployeeNames.push({id: 1, name: 'Jasmine', isActive: false});
self.EmployeeNames.push({id: 2, name: 'Jhon', isActive: true});
self.EmployeeNames.push({id: 3, name: 'juliet', isActive: false});

并且在我的 HTML 内的应用程序中，我使用 Knockout foreach 绑定来绑定它，如下所示：

<div data-bind="foreach: EmployeeNames">
  <div class="container" data-bind="text: $data.name, css: {active: isActive}, click: $parent.setEmployeeToActive">
  </div>
</div>

在上面的代码中，如您所见，当任何员工的 isActive 设置为 true 时，将应用 css class。

现在，当我单击另一个员工姓名时，它应该将该员工的 isActive 设置为 true，并且 css class 应该相应地更新。

为了实现这一点，我有 click binding 每当用户单击 employeeName 时，我都会更新数组，如下所示：

self.setEmployeeToActive = function(selectedEmp) {
    self.EmployeeNames().forEach(function(emp){
      if(emp.id === selectedEmp.id) {
        emp.isActive = true;
      }
      else {
        emp.isActive = false;
      }
    });

    self.EmployeeNames.valueHasMutated();
  };

但是在HTML中并没有体现出来。

我试过 valueHasMutated 但没有成功。

Demo Code

Answer 1

数组元素的成员也必须是可观察的。

self.EmployeeNames.push({id: ko.observable(1), name: ko.observable('Jasmine'), isActive: ko.observable(false)});

See fiddle

Knockout - Foreach 绑定 - 如何在 HTML 中反映更新值

Knockout - Foreach binding - How to reflect updated value in HTML

html

knockout.js