I have an issue with binding the click event to a label in a template.
I’ve posted issue on JSFiddle: http://jsfiddle.net/scornell10/JFTbk/
When you select an item in the DataGrid, it is moved to the ListView.
The ListView uses a template that has a label (with the value of X) that I bind the click event too.
The bind works for 1st or the last selection.
If I select multiple, only the last item in the listView has the click event bind to it. All the others go away.
I’ve used Chrome dev tools and I can see the click event disappear when I add another item.
I can get a workaround by changing the template to:
<label>${Name}</label><label id="${ID}" onClick="onDelete(this);">X</label>
I’d rather bind dynamically as each item is selected.
Any thoughts on why it seems to remove the click handler?
Thanks
<!-- View -->
<
div
id
=
"view"
>
<!-- The value of the INPUT element is bound to the "firstName" field of the View-Model.
When the value changes so will the "firstName" field and vice versa. -->
<
label
>First Name:<
input
data-bind
=
"value: firstName"
/></
label
>
<!-- The value of the INPUT element is bound to the "lastName" field of the View-Model.
When the value changes so will the "lastName" field and vice versa. -->
<
label
>Last Name:<
input
data-bind
=
"value: lastName"
/></
label
>
<!-- The click event of the BUTTON element is bound to the "displayGreeting" method of the View-Model.
When the user clicks the button the "displayGreeting" method will be invoked. -->
<
button
data-bind
=
"click: displayGreeting"
>Display Greeting</
button
>
</
div
>
<
script
>
// View-Model
var viewModel = {
firstName: "John",
lastName: "Doe",
displayGreeting: function() {
// Get the current values of "firstName" and "lastName"
var firstName = this.get("firstName");
var lastName = this.get("lastName");
alert("Hello, " + firstName + " " + lastName + "!!!");
}
};
// Bind the View to the View-Model
kendo.bind($("#view"), viewModel);
</
script
>
// Get the current values of "firstName" and "lastName"
var firstName = this.get("firstName");
var lastName = this.get("lastName");
alert("Hello, " + firstName + " " + lastName + "!!!");
alert("Hello, " + this.firstName + " " + this.lastName + "!!!");
this.firstName = '';
this.set("firstName", '');