Cant bind functions to iteration items

[lmartins]

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]

Hi @lmartins, The missing plugin you're looking for is events. :thumbsup:

var List = ripple(listTemplate)
  .use(each)
  .use(events);

[lmartins]

oohh, such a silly mistake. Thanks @chrisbuttery