Knockout JS Несколько кнопок, каждый из которых имеет функцию щелчка

Question

Я пытаюсь иметь кучу кнопок, которые, когда вы нажимаете кнопку, сообщают вам свое имя. В настоящее время мой код выглядит следующим образом:

HTML:

<ul data-bind="foreach: items"> 
    <button data-bind="text: name, click: alertName(name)"></button> 
</ul> 

JS:

ko.applyBindings({ 
    items: [{"name":"Burt"},{"name":"Sam"},{"name":"Greg"}] 
}); 

function alertName(name){ 
    alert(name); 
} 

Я бегу в горсть ошибок:

Uncaught ReferenceError: Невозможно обработать связывание "foreach: function() {return items}"

Сообщение: невозможно обработать bindin г "нажмите: функция() {возвращение alertName (имя)}"

Сообщение: alertName не определен

Есть простой способ для достижения этой цели в knockoutjs? У меня есть jsfiddle здесь: http://jsfiddle.net/hny7295e/

Answer 1

Вам следует создать ViewModel. Взгляните на документацию по адресу ViewModels. Метод alertName должен быть на этом ViewModel. Поскольку метод не относится к отдельному элементу, вам необходимо использовать $parent.alertName(). Текущий элемент в цикле будет передан нокаутом в метод alertName.

function ViewModel() { 
    var self = this; 

    self.items = [{"name":"Burt"},{"name":"Sam"},{"name":"Greg"}]; 

    self.alertName = function (item) { 
     alert(item.name); 
    }; 
} 

var viewModel = new ViewModel(); 

ko.applyBindings(viewModel); 

JsFiddle