Cant bind functions to iteration items
Closed this issue · 2 comments
lmartins commented
I was trying to implement a simple list, based on the samples provided.
The following JS:
listTemplate = "<div class=\"ItemsList\">\n <ul each=\"{{items}}\">\n <li>\n {{name}} <button on-click=\"{{ this.removeItem.bind(this, $index) }}\">Remove</button>\n </li>\n </ul>\n</div>";
List = ripple(listTemplate).use(each);
List.prototype.removeItem = function(index) {
return this.data.items.splice(index, 1);
};
list = new List({
data: {
items: [
{
name: "Name1"
}, {
name: "Name2"
}
]
}
});
list.appendTo('.Page');
Renders to this:
<div class="ItemsList">
<ul each="{{items}}"><li>
Name1 <button on-click="function () {
[native code]
}">Remove</button>
</li><li>
Name2 <button on-click="function () {
[native code]
}">Remove</button>
</li></ul>
</div>
And the button doesn't trigger the removeItem
function which is part of the List prototype.
Any idea what I may be doing wrong?
chrisbuttery commented
lmartins commented
oohh, such a silly mistake.
Thanks @chrisbuttery