Удалить элемент из списка с помощью Knockout.js

Когда вы используете синтаксис {{each}} в шаблонах jQuery, контекст данных — это то, с чем связан общий шаблон. В вашем случае это вся модель представления.

Несколько вариантов:

1- вы можете использовать свой текущий код и передать элемент, который вы «каждый» используете, в функцию, например ( http://jsfiddle.net/rniemeyer/qB9tp/1/):

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

Однако использование анонимной функции в привязке данных довольно уродливо. Есть лучшие варианты.

2- вы можете использовать параметр foreach привязки шаблона, который работает с шаблонами jQuery и более эффективен, чем {{каждый}} как ( 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 передаст его в качестве первого аргумента.

3- Поскольку плагин jQuery Templates устарел, а Knockout теперь поддерживает собственные шаблоны, вы можете удалить свою зависимость от плагина jQuery Templates. Вы все еще можете использовать именованный шаблон (просто нужно заменить любой синтаксис шаблонов jQuery атрибутами привязки данных), например: http://jsfiddle.net/rniemeyer/qB9tp/3/ или даже удалить шаблон и просто использовать привязку потока управления foreach, например: 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- Хотя я предпочитаю вариант № 3, вы даже можете использовать делегирование событий и прикрепить «живой» обработчик, например: http://jsfiddle.net/rniemeyer/qB9tp/5/

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

Это может быть особенно полезно, если вы будете присоединять большое количество одних и тех же обработчиков через привязку click (например, в сетке).

Я заметил, что здесь есть пример того, как это сделать:

http://blog.stevensanderson.com/2011/12/21/knockout-2-0-0-released/

Ознакомьтесь с 4. Более чистая обработка событий, где Стив показывает пример удаления элемента из списка.

<h3>Products</h3>

<ul data-bind="foreach: products">
    <li>
        <strong data-bind="text: name"></strong>
        <button data-bind="click: $parent.removeProduct">Delete</button>
    </li>
</ul>

Javascript:

    function appViewModel() {
        var self = this;
        self.products = ko.observableArray([
            { name: "XBox" },
            { name: "PlayStation" },
            { name: "Banana" },
            { name: "Wii" }
        ]);

        self.removeProduct = function(product) {
            self.products.remove(product);   
        }
    };

ko.applyBindings(new appViewModel());

Но учтите, что приведенный выше пример относится к последней версии KnockoutJS 2.0.