从observableArray- knockoutjs中删除

Question

我相信这对某人来说是一个简单的答案.我有以下ViewModel:

@{
    var initialData = new JavaScriptSerializer().Serialize(Model);
}
var data = @Html.Raw(initialData);
function ViewModel(data) {
    var self = this;
    self.Name = ko.observable(data.Name);
    self.Items = ko.observableArray(data.Items);
    self.addItem = function() { self.Items.push(""); };
    self.removeItem = function(data) { self.Items.remove(data); }
}
$(document).ready(function() {ko.applyBindings(new ViewModel(data)); });

以下视图:

<div>
    Name: <span data-bind="text: Name"></span>
</div>
<div>
    Items: <button data-bind="click: addItem">Add Item</button>
</div>
<div>
    <table>
        <tbody data-bind="template: { name: 'itemTemplate', foreach: Items }"></tbody>
    </table>
</div>
<script type="text/html" id="itemTemplate">
    <tr>
        <td>
            <input data-bind="value: $data" />
            <a href="#" data-bind="click: function() {$parent.removeItem($data)}">Remove Item</a>
        </td>
    </tr>
</script>

除了之外,一切似乎都正常工作removeItem.添加新行并在空的新行上单击"删除项"时,将删除所有新行.我看了很多淘汰教程试图让这个工作,我的方法似乎是一个有效的尝试,但显然......我必须遗漏一些东西.有什么建议？

Answer 1

removeobservableArray 的函数循环遍历数组并删除与传递给它的值匹配的所有项.在你的情况下,你只是处理字符串,它会看到所有新的(没有值)将匹配"".

有几种方法可以处理它:

• 你可以处理对象而不仅仅是字符串{ value: ko.observable("") }.然后,当您传递$data它时,将仅删除与该对象引用匹配的实际项目.如果您的值不可观察并且是数据本身(而不是属性),那么您的写入实际上不会使其返回到您的视图模型.

• 如果这对您的方案不起作用,那么您可以$index使用splice 删除基于index()的项目.

我可能会这样做:http://jsfiddle.net/rniemeyer/N3JaW/

另请注意,event(click是包装event)绑定会将当前数据作为处理程序的第一个参数传递,因此您可以简化绑定click: $parent.removeItem.

更新:您可以通过以下几种方法控制对象转换为JSON的方式:

• ko.toJSON将其第二和第三个参数传递给JSON.stringify.第二个arg让你运行一个函数来替换这里描述的值.下面是一个示例,它检查密钥是否为数字(数组项)并且它具有value属性.如果是这样,它只返回字符串而不是对象. http://jsfiddle.net/rniemeyer/N3JaW/1/

• 如果对对象使用构造函数,则可以toJSON按此处所述覆盖函数.以下是具有此功能的示例:http://jsfiddle.net/rniemeyer/N3JaW/2/

• 可以使用的另一种技术是维护具有"良好"值的计算可观察量.以下是示例:http://jsfiddle.net/rniemeyer/N3JaW/3/.在这一个Items是一个计算的observable返回清洁值. Items.asObjects包含值的对象版本.转换为JSON时,转换为JSON时,该asObjects部件会自然删除Items.如果在转换为JSON时只需要这个"好"数组,那么其他选项对于性能更好(它们仅在您想要发送时计算).