在 observableArray 中添加对象时如何刷新 observable？答案

【问题标题】：How to refresh observable while adding object in the observableArray?在 observableArray 中添加对象时如何刷新 observable？
【发布时间】：2015-10-19 17:01:23
【问题描述】：

我是 knockout.js 的新手，我尝试将 observable 添加和删除到 observableArray。我只是从数组中取出第一个 observable 并将其分配给输入元素以跟踪数组中的更改。即）当我向 observableArray 添加一些可观察对象时，它需要反映在输入元素中。

请参考下面我的代码

HTML：

B[0] Value: <input data-bind="value: b"/>
<br/><br/>
<table>
    <thead>
        <tr>
            <th>A</th><th>B</th>
        </tr>
    </thead>    
    <tbody data-bind="foreach: result">
        <tr>
            <td><input data-bind="value: a()"/></td>
            <td><input data-bind="value: b()"/></td>        
        </tr> 
    </tbody>
</table>
<br/>
<button data-bind="click: add">Add</button>
<button data-bind="click: remove">Remove</button>

JS：

function generate(data) {
    self = this;
    self.a = ko.observable(data.a);
    self.b = ko.observable(data.b); 
}
var arr = [{a:1, b:2}, {a:2, b:3}, {a:3, b:4}]
var obsarr = $.map(arr, function(data){ return new generate(data); });
var obsArray = {
    result : ko.observableArray(obsarr),
    b: ko.observable(obsarr[0].b)(),
    add: function(){
        var obj = new generate({a:4, b:4});
        obsArray.result.splice(0, 0, obj);
    },    
    remove: function(){
        obsArray.result.splice(0, 1);
    }
}
ko.applyBindings(obsArray);

但是当我添加 observable 时，它不会反映到输入中，当我在添加 observable 后更改输入值时，它会反映到数组的第二个位置 (B1)。

有什么我遗漏的或者我实施了什么错误吗？

以上内容请参考JSFiddle。

提前致谢:-)

更新：

两个方向变化：Two-Directional ObservableArray

【问题讨论】：

标签： knockout.js

【解决方案1】：

使用计算返回最新第一项的b 值。没有物品的情况下不要忘记考虑！

obsArray.b = ko.computed(function () {
    var firstItem = obsArray.result()[0];
    if (firstItem) {
        return firstItem.b();
    }
});

JSFiddle

另外，如果您希望输入绑定是双向，请不要在声明绑定时解开可观察对象。请注意缺少()。

<input data-bind="value: b"/>

【讨论】：

【解决方案2】：

我已经更新了你的JSFiddle。

简而言之：

如果要更新值，则无需使用括号：

<td><input data-bind="value: a"/></td>
<td><input data-bind="value: b"/></td>

您需要一个计算来检索可观察数组的第一个元素：

var obsarr = ko.observableArray($.map(arr, function(data){ return new generate(data); }));
var obsArray = {
    result : obsarr,
    b: ko.computed(function() {
        return obsarr()[0].b();
    }),
    ......

【讨论】：