如何使用knockout observable数组更新特定的表列

时间:2013-11-09 02:34:12

标签: arrays knockout.js observable

我有一个简单的ko可观察客户对象数组。在视图中是使用table / tr / td html元素的简单foreach数据绑定。客户对象的一个​​属性是“notes”字段,最多可包含1000个字符。

当视图首次加载时,我将“notes”属性的text属性绑定到一个函数,该函数返回带有“....”的音符的前100个字符,以表示如果适用,还有更多文本。

如果用户单击一个复选框以“查看完整备注”我想刷新备注列,只有这次我没有子串,我显示整个值。如何让KO重新评估foreach,具体来说,我可以刷新音符列吗?

实际的可观察数组值在此过程中根本没有改变,只是显示正在改变。

(如果重要的话,使用durandal 2.0框架)

1 个答案:

答案 0 :(得分:1)

可以使用计算的observable来完成,就像这样(小提琴:http://jsfiddle.net/MA8Mu/2/):

HTML:

showFullNotes: <input type="checkbox" data-bind="checked:showFullNotes" /><br />
<table>
    <tbody data-bind="foreach:customers">
        <tr>
            <td>
                <span data-bind="text:actualNotes"></span>
            </td>
        </tr>
    </tbody>
</table>

JS:

var Customer = function(notes, parent ){
    var self = this;
    self.notes = ko.observable(notes);

    self.actualNotes = ko.computed(function() {
        if (parent.showFullNotes()){
            return self.notes();
        } else {
            return self.notes().substring(0,5) + "...";
        }
    }, self);
} 


var VM = function(){
    var self = this;
    self.showFullNotes = ko.observable(false);
    self.customers = ko.observableArray(
        [new Customer("123456789", self),
        new Customer("abcderfgh", self)]
    );
}

var vm = new VM();
    ko.applyBindings(vm);