Knockout 绑定：如何更新存储在 observableArray() 中的对象的值？

Question

我在 knockout.js 和数据绑定方面处于 "hello world" 阶段。

我找不到绑定和更新存储在 observableArray 中的对象的成员值的正确方法。

第一次绑定有效，但随后它不会在网页中自行更新。

这是我正在尝试做的事情：

<div class="row" data-bind="foreach:chains">
    <div class="col-md-12">
        <h3>Obj id is <span data-bind="text: id"></span> </h3>
        <span data-bind="text: message"></span>         
        </div>
    </div>

javascript 部分：

(function () {
  var Chain = function (chainId) {
    var self = this;
    self.id = chainId;
    self.message = "N/A";
    // etc. (more memberS)
};


var Model = function() {
    var self = this;
    self.chains = ko.observableArray();
};

 Model.prototype = {
    updateChains: function(updatedChains) {
         // here chain values are updated, in words:
         // if chain does not exist then create it and add it to self.chains
         // self.chains.push(newChain); 
         // otherwise update chain.message as:
         // existingChain.message = updatedMessage;
   }

var model = new Model();

$(function() {
    ko.applyBindings(model);
});
}());

我调试了代码，更新部分一切正常，message 获得了一个新值，但它在 UI 中不可见（它仍然是 "N/A"）。看来我在绑定中做错了什么。

我尝试了其他几种方法，但每次都失败了。

我怎样才能做到这一点？

Answer 1

来自 Observable Arrays 上的淘汰赛页面：

Key point: An observableArray tracks which objects are in the array, not the state of those objects

Simply putting an object into an observableArray doesn’t make all of that object’s properties themselves observable. Of course, you can make those properties observable if you wish, but that’s an independent choice. An observableArray just tracks which objects it holds, and notifies listeners when objects are added or removed.

如果您希望 Chain 上的 message 可见：

var Chain = function (chainId) {
    var self = this;
    self.id = chainId;
    self.message = ko.observable("N/A");
    ...
};

然后，当您想在现有 Chain 上设置 message 时，您需要这样做：

existingChain.message(updatedMessage);

不是这个：

existingChain.message = updatedMessage

Answer 2

Observable 数组不跟踪其内容的状态，仅当数组本身被修改时。

Documentation (second paragraph)

实现您的目标的一种方法是让您的链 class 的成员也可观察到：

var Chain = function (chainId) {
    var self = this;
    self.id = chainId;
    self.message = ko.observable("N/A");
    // etc. (more members)
};

然后您的更新函数将在找到的对象中设置可观察对象：

self.chains()[foundIndex].memberToUpdate(newValue)

Knockout 绑定：如何更新存储在 observableArray() 中的对象的值？

Knockout binding: how to update value of an object stored in a observableArray()?

asp.net

data-binding

asp.net-mvc

knockout.js