Question

我是Knockout的新手并且还在学习它我有一个简单的页面，因此用户可以添加和删除项目。删除＆＃39; function（名为＆＃39; deleteItem＆＃39;）适用于版本1代码，但不适用于版本2代码。请帮我了解背后的原因。提前谢谢。

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

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

我的代码详情：

两个版本之间的区别是：

在版本1中，属性＆＃39; myItems＆＃39;是一组具有＆＃39; name＆＃39;属性。
在版本2中，属性＆＃39; myItems＆＃39;是一个没有任何属性的元素数组。那些数组元素只是文字字符串。

版本1 代码：＆＃34;删除＆＃34;函数（名为＆＃39; deleteItem＆＃39;）正在运行

<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 ：＆＃34;删除＆＃34;函数（名为＆＃39; deleteItem＆＃39;）无法正常工作

<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>

Answer 1

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

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

来自documentation：

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

因此您需要将deleteItem重写为：

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

演示JSFiddle.

请注意，它适用于您的两个样本。

'删除'功能有效，不适用于ko.observableArray（）

1 个答案: