Question

我有一个数组，我单挑一个项目，更改数据，但我没有看到绑定的变化。

这是我的代码：

HTML：

<div id="container">
   <div data-bind="text: age">
   </div>
</div>

JAVASCRIPT：

function ContainerVM() {
   var self = this;
   self.persons = ko.observableArray();
   self.persons.push({
      name: 'John',
      age: 30
   });
   self.persons.push({
      name: 'Jane',
      age: 40
   });
   self.selectedPerson = ko.observable(undefined);
   self.age = ko.computed(function() {
      return self.selectedPerson() === undefined ? 0 : self.selectedPerson().age;
   }, this);
}

var vm = new ContainerVM();
ko.applyBindings(vm, document.getElementById("container"));

vm.selectedPerson(vm.persons()[0]);

console.log(vm.persons()[0]);

vm.selectedPerson().age = 50;

console.log(vm.persons()[0]);

Fiddle

当我将年龄更改为50时，我希望<div data-bind="text: age">更改为50，但它不会。

Console.log显示，人员项目已更改为50。

我做错了什么？

Answer 1

在这里：https://jsfiddle.net/ex05eun5/4/

基本上问题是当只有数组中某个项的属性发生更改时，DOM才会更新。解决方案是创建可观察元素的数组。创建ObservablePerson正是这样做的。

var ObservablePerson = function(name, age){
    var self = this;
  self.name = ko.observable(name);
  self.age = ko.observable(age);
}

因此，当您将元素推送到数组时，可以按如下方式执行：

self.persons.push(new ObservablePerson(
    'John',
    30
));

并按如下方式修改它们：

vm.selectedPerson().age(50);

以下是官方文档对此的说法：

关键点：observableArray跟踪数组中的对象，   不是那些对象的状态

简单地将一个对象放入一个observableArray并不能完全实现   该对象的属性本身是可观察的。当然可以   如果你愿意，可以观察这些属性，但那是一个   独立选择。 observableArray只跟踪它的对象   保持，并在添加或删除对象时通知侦听器。

http://knockoutjs.com/documentation/observableArrays.html

Knockoutjs绑定不变

1 个答案: