0

我是 Knockout 的新手，并且仍在学习它。
我有一个简单的页面，因此用户可以添加和删除项目。“删除”功能（名为“deleteItem”）适用于版本 1 代码，但不适用于版本 2 代码。请帮助我知道背后的原因。提前致谢。

顺便说一句，版本 2 的代码来自链接http://knockoutjs.com/documentation/foreach-binding.html#note_5_postprocessing_or_animating_the_generated_dom_elements底部附近的注释 7

版本 1 的代码来自同一链接的示例 2。

我的代码的详细信息：

2个版本的区别是：

在版本 1 中，属性“myItems”是具有“名称”属性的对象数组。
在版本 2 中，属性“myItems”是一个没有任何属性的元素数组。这些数组元素只是文字字符串。

版本 1代码：“删除”功能（名为“deleteItem”）正在工作

<div>
    <ul data-bind="foreach: {data: myItems}">
        <li>
            <span data-bind="text: $data.name"></span> <a href="#"  data-bind="click : $parent.deleteItem" 

>Delete</a>
        </li>
    </ul>
    <button data-bind="click: addItem">Add</button>
</div

<script type="text/javascript">
    $(function () {
        function ViewModel() {
             var self = this;

            self.myItems = ko.observableArray([{ name: 'A' }, { name: 'B' }, { name: 'C' } ]);  /*********/
            self.addItem = function () { self.myItems.push({ name: 'New item at ' + new Date() }); }         


            self.deleteItem = function () {
                self.myItems.remove(this);
            };
        }

        ko.applyBindings(new ViewModel());

    });

</script>

版本 2：“删除”功能（名为“deleteItem”）不起作用

<div>
    <ul data-bind="foreach: myItems">
        <li>
            <span data-bind="text: $data"></span> <a href="#"  data-bind="click : $parent.deleteItem" 

>Delete</a>
        </li>
    </ul>
    <button data-bind="click: addItem">Add</button>
</div>

<script type="text/javascript">
    $(function () {
        function ViewModel() {
            var self = this;

            self.myItems = ko.observableArray(['A', 'B', 'C']);  /*********/
            self.addItem = function () { self.myItems.push('item added at ' + new Date()); };

            self.deleteItem = function () {
                self.myItems.remove(this);
            };
        }

        ko.applyBindings(new ViewModel());

    });

</script>
4

1 回答 1

2

您不应期望this成为处理程序中的当前模型click。

而不是this你应该使用处理程序的第一个参数，它保证是当前模型：

从文档中：

调用您的处理程序时，Knockout 将提供当前模型值作为第一个参数。

所以你需要重写你deleteItem的：

self.deleteItem = function (item) {
    self.myItems.remove(item);
};

演示JSFiddle。

请注意，它适用于您的两个示例。

于 2013-05-01T19:10:37.813 回答