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类。

现在，当我单击其他员工名称时，应将该员工的isActive设置为true，并相应地更新css类。

为了实现这一点，我拥有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

淘汰赛-Foreach绑定-如何在HTML中反映更新的值

1 个答案: