使用Knockout.js列表中删除项目 [英] Delete Item from List using Knockout.js

问题描述

我想从列表中删除项目。我使用knockout.js与映射插件。我的code是这样的：

I am trying to delete an item from a list. I am using knockout.js with the mapping plugin. My code looks like this:

@{ var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(Model));}

模板

<script type="text/html" id="imgsList">
    {{each model.Imgs}}
        <div style="float:left; margin: 10px 10px 10px 0;">
            <div><a href="${Filename}"><img src="${Filename}" style="width:100px;"></img></a></div>
            <div data-bind="click: deleteImage">Delete</div>
        </div>
    {{/each}}
</script>

K.O.的JavaScript

<script type="text/javascript">
     $(function() {
        //KO Setup
        var viewModel = { 
            "model": ko.mapping.fromJS(@jsonData),
            "deleteImage" : function(item) {alert(item.Filename + ' deleted.');}
        }

        ko.applyBindings(viewModel);
    });
</script>

的HTML

<div data-bind="template: 'imgsList'"></div>

问题

一切按预期工作。图像的列表显示了删除按钮，然而，当你点击一个按钮item.Filename是不确定的。思考？

Edit：从KNockout.js手册摘自：当你调用处理程序，淘汰赛将提供电流模型值作为第一个参数，这是特别有用的，如果你正在渲染集合中的每个项目的一些UI，和你需要知道单击了哪个项目的用户界面。

Taken from the KNockout.js Manual: "When calling your handler, Knockout will supply the current model value as the first parameter. This is particularly useful if you’re rendering some UI for each item in a collection, and you need to know which item’s UI was clicked."

看来，我没有得到回图对象，我期待。我不知道我找回！

It appears that I am not getting back the Img object I am expecting. I don't know what I am getting back!

推荐答案

当你使用{{每个}}语法jQuery的模板，数据上下文无论是整体的模板对约束。在你的情况，那就是整个视图模式。

When you use {{each}} syntax in jQuery Templates, the data context is whatever the overall template is bound against. In your case, that is the entire view model.

有几个选项：

1，你可以使用当前的code和传递您是在eaching像功能（该项目的 http://jsfiddle.net/rniemeyer/qB9tp/1/ ）：

1- you can use your current code and pass the item that you are "eaching" on to the function like ( http://jsfiddle.net/rniemeyer/qB9tp/1/ ):

<div data-bind="click: function() { $root.deleteImage($value); }">Delete</div>

在数据绑定使用anomymous功能是pretty虽然难看。有更好的选择。

Using an anomymous function in the data-bind is pretty ugly though. There are better options.

2 - 可以用模板绑定，这与jQuery的模板工程，并且比{{每个}}像（的的foreach 参数= http://jsfiddle.net/rniemeyer/qB9tp/2/\">http://jsfiddle.net/rniemeyer/qB9tp/2/ ）：

2- you can use the foreach parameter of the template binding, which works with jQuery Templates and is more efficient than {{each}} like ( http://jsfiddle.net/rniemeyer/qB9tp/2/ ):

<script type="text/html" id="imgsList">
    <div style="float:left; margin: 10px 10px 10px 0;">
        <div>
            <a href="${Filename}">${Filename}</a>
        </div>
        <div data-bind="click: $root.deleteImage">Delete</div>
    </div>
</script>

<div data-bind="template: { name: 'imgsList', foreach: model.Imgs }"></div>

现在，该模板的上下文是个人形象对象并调用 $ root.deleteImage 将它传递的第一个参数。

Now, the context of the template is the individual image object and calling $root.deleteImage will pass it as the first argument.

3一直以来，jQuery的模板插件去precated和淘汰赛现在支持本机模板，你可能想选择了jQuery插件模板移除你的依赖。你仍然可以使用命名模板（只需要更换数据绑定属性的任何jQuery的模板语法），如：的http：//的jsfiddle .NET / rniemeyer / qB9tp / 3 / 甚至删除模板，只是像的foreach 控制流结合去：的http://jsfiddle.net/rniemeyer/qB9tp/4/

3- Since, the jQuery Templates plugin is deprecated and Knockout now supports native templates, you might want to choose removing your dependency on the jQuery Templates plugin. You could still use a named template (just need to replace any jQuery Templates syntax with data-bind attributes) like: http://jsfiddle.net/rniemeyer/qB9tp/3/ or even remove the template and just go with the foreach control-flow binding like: http://jsfiddle.net/rniemeyer/qB9tp/4/

<div data-bind="foreach: model.Imgs">
    <div style="float:left; margin: 10px 10px 10px 0;">
        <div>
            <a data-bind="text: Filename, attr: { href: Filename }"></a>
        </div>
        <div data-bind="click: $root.deleteImage">Delete</div>
    </div>
</div>

4-虽然我preFER选项＃3，你甚至可以选择使用事件代表团和附加一个活的处理程序，如：的http://jsfiddle.net/rniemeyer/qB9tp/5/

$("#main").on("click", ".del", function() {
   var data = ko.dataFor(this);
   viewModel.deleteImage(data); 
});

这可以是特别有益的，如果你会通过附加大量相同的处理程序的点击（在一个网格等）的结合。

This can be especially beneficial if you would be attaching a large number of the same handlers via the click binding (like in a grid).

这篇关于使用Knockout.js列表中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！