knockout - notify when 'with' directive is fired - dom

Question

Hi I have the following scenario.
Some elements are nested within a with
<!-- 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
}
The problem I have is that if the selected_item changes - I loose the bindings on the edit button.
In this scenario, it is a little difficult to subscribe to the model.selected_item and reapply the bindings - so I'd like to get notified when the elements within the with directive are updated and reapply then.
Is there a knockout specific way to achieve this?
An help much appreciated.

Answer 1

The reason you are getting this problem is that the click handler element is being destroyed by the template engine each time you update item.
Here is an example of the way to achieve what you want without resorting to jquery delegate bindings, which while they do work they are poluting your otherwise nice KO model with needless dom operations. Everytime I find myself using the old $() selector with a KO app I have to seriously consider whether there is a better model oriented way.
http://jsfiddle.net/madcapnmckay/EFQ9S/
The gist of this is to convert your model into true js classes and use those to bind KO click events rather than jquery click handlers. The beauty of this approach is that KO will rebind for you elements when they get destroyed.
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" }));
})
Hope this helps.