从observableArray- knockoutjs删除 [英] remove from observableArray- knockoutjs

问题描述

我敢肯定，这将是为某人一个简单的答案。我有以下视图模型：

I'm sure this will be an easy answer for somebody. I have the following 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 正常工作。当新行已被添加，以及删除项目上点击一个空的新行，所有的新行会与它被移除。我看着吨淘汰赛教程试图得到这个工作，而我的方法似乎是一个有效的尝试，但很明显...我必须失去了一些东西。有什么建议？

Everything seems to work correctly except for removeItem. When new rows have been added, and "Remove Item" is clicked on an empty new row, all of the new rows will be removed with it. I've looked at tons of knockout tutorials trying to get this to work, and my method seems to be a valid attempt, but obviously... I must be missing something. Any suggestions?

推荐答案

这是observableArray的删除函数遍历数组，并删除匹配传递到值的任何项目它。在你的情况，你只是处理字符串，它会看到所有新的（没有值）将匹配。

The remove function of an observableArray loops through the array and deletes any items that match the value passed to it. In your case, you are just dealing with strings and it will see that all of the new ones (with no value) will match "".

有几种方法来处理它：

• 您可以处理对象，而不是就像字符串值为{value：ko.observable（）} 。然后，当你通过 $数据只会删除该对象引用符合实际的项目。如果你的价值是无法观察到的，是数据本身（而不是属性），那么你的写操作实际上不会使其恢复到您的视图模式。

• you can deal with objects instead of just strings like { value: ko.observable("") }. Then, when you pass $data it will only delete the actual item that matches that object reference. If your value is not observable and is the data itself (not a property), then your writes won't actually make it back to your view model.

如果没有你的情况下工作，那么你可以删除基于索引项（ $指数）用剪接。

if that does not work for your scenario, then you could delete items based on the index ($index) using splice.

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

另外请注意，事件（点击是一个包装事件）的结合将通过当前数据作为第一个参数的处理程序，所以您可以简化结合点击：$ parent.removeItem 。

Also note that the event (click is a wrapper to event) binding will pass the current data as the first argument to the handler, so you can simplify your binding to click: $parent.removeItem.

更新：在这里，你可以控制你的对象是如何转换成JSON几种方式：

Update: here are several ways that you can control how your object is converted to JSON:

• ko.toJSON 传递给 JSON.stringify 第二次和第三参数。第二ARG使你可以运行一个函数描述这里潜在的替代值。下面是一个检查，看看是否的关键是一个数字（数组项）的样本，它有一个值属性。如果是这样的，它只是返回字符串而不是对象。 http://jsfiddle.net/rniemeyer/N3JaW/1/

• ko.toJSON passes its 2nd and 3rd arguments on to JSON.stringify. The second arg let's you run a function to potentially replace values as described here. Here is a sample that checks to see if the key is a number (array item) and it has a value property. If so, it just returns the string rather than the object. http://jsfiddle.net/rniemeyer/N3JaW/1/

如果你使用一个构造函数为对象，然后根据描述可以覆盖的toJSON 函数的此处。下面是使用这一功能的示例： http://jsfiddle.net/rniemeyer/N3JaW/2/

If you use a constructor function for your objects, then you can override the toJSON function as described here. Here is your sample with this functionality: http://jsfiddle.net/rniemeyer/N3JaW/2/

这可被使用的另一种方法是保持一个计算观察到的具有良好的值。下面是示例： http://jsfiddle.net/rniemeyer/N3JaW/3/ 。在这其中项目是计算观察到，返回干净值。 Items.asObjects 包含你的价值观的对象版本。当转换成JSON，在 asObjects 部分自然跌落时项目转换为JSON。如果你只是转换为JSON时，需要这个好的阵列，那么其他的选项是获得更好的性能（当他们要发送它只计算）。

Another technique that can be used is to maintain a computed observable that has the "good" value. Here is sample: http://jsfiddle.net/rniemeyer/N3JaW/3/. In this one Items is a computed observable that returns the clean value. Items.asObjects contains the object version of your values. When converted to JSON, the asObjects part is naturally dropped when Items is converted to JSON. If you only need this "good" array when converting to JSON, then the other options are better for performance (they only are calculated when you want to send it).

这篇关于从observableArray- knockoutjs删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！