Question

我是knockout.js的新手，我试图添加和删除observable到observableArray。我只是从数组中取出第一个observable并将其分配给一个输入元素来跟踪数组的变化。 ie）当我向observableArray添加一些observable时，它需要反映在input元素中。

请参阅下面的代码

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后更改输入值时，它会反映到数组的第二个位置（B 1）。

我有什么遗漏或者我有任何错误吗？

请参阅上面的JSFiddle。

提前致谢： - ）

更新

两个方向变化：Two-Directional ObservableArray

Answer 1

我已更新您的JSFiddle。

用几句话说：

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

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

你需要一个computed来检索可观察数组的第一个元素：

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

Answer 2

使用computed返回最新第一项的b值。不要忘记在没有物品的情况下说明情况！

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

JSFiddle

此外，如果您希望输入绑定是双向，则在声明绑定时不要打开observable。请注意缺少()。

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

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

2 个答案: