knockout - уведомляет, когда запускается директива with

Question

Привет У меня есть следующий сценарий.

Некоторые элементы вложены в

<!-- ko with: model.selected_item -->
<tr>
<td style="width:20%">Name:</td>
<td style="width:80%" class="field" data-bind="text: name"></td>
<td style="width:10px"><div class="btn_edit"></div></td>
</tr>
<tr>
etc...
<!-- /ko -->
$("div.btn_edit", component.context).on("vclick", function(e){
//edit it
}

У меня проблема в том, что, если selected_item изменяется - я теряю привязки на кнопке редактирования. В этом сценарии немного сложно подписаться на model.selected_item и повторно применить привязки - поэтому я хотел бы получать уведомления, когда элементы в директиве with обновляются и затем применяются повторно. Есть ли какой-нибудь конкретный способ добиться этого?

Помощь высоко ценится.

Answer 1

Причиной возникновения этой проблемы является то, что элемент обработчика кликов уничтожается механизмом шаблонов каждый раз, когда вы обновляете элемент.

Вот пример способа достижения того, чего вы хотите, не прибегая кПривязки делегатов jquery, которые, в то время как они работают, загрязняют вашу отличную модель нокаута ненужными операциями dom.Каждый раз, когда я сталкиваюсь со старым селектором $ () с приложением KO, мне приходится серьезно задумываться о том, есть ли лучший ориентированный на модель способ.

http://jsfiddle.net/madcapnmckay/EFQ9S/

Суть этого состоит в том, чтобыпреобразовать вашу модель в настоящие js-классы и использовать их для привязки событий щелчка KO, а не jquery-обработчиков щелчков.Прелесть этого подхода в том, что KO свяжет для вас элементы, когда они будут уничтожены.

var item = function (config) {
    var self = this;
    this.name = ko.observable(config.name);
    this.edit = function () {
        $("body").append("<div>lets edit " + self.name()+"</div>");
    };
};

var model = function() {
    this.item = ko.observable();
    this.pushNew = function () {
        this.item(new item({name: "new name"}));
    };
}

$(document).ready(function(e) {
    var mymodel = new model();
    ko.applyBindings(mymodel);

    mymodel.item(new item({ name: "the_name" }));
})

Надеюсь, это поможет.