如何使用剔除可观察数组更新特定表列答案

【问题标题】：How to update a specific table column with knockout observable array如何使用剔除可观察数组更新特定表列
【发布时间】：2013-11-21 05:05:12
【问题描述】：

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

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

如果用户单击复选框以“查看完整注释”我想刷新注释列，只是这次我不对其进行子字符串化，而是显示整个值。如何让 KO 重新评估 foreach，具体来说，我可以只刷新 notes 列吗？

在这个过程中实际可观察到的数组值根本没有改变，只是显示在改变。

（如果重要，使用 durandal 2.0 框架）

【问题讨论】：

标签： arrays knockout.js observable

【解决方案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);

【讨论】：