Не получается удалить элемент Knockout
Всем привет!
В процессе изучения Knockout.js, разбора документации и примеров столкнулся с проблемой, которая завела меня в тупик, а именно у меня не получается удалить элемент методом .remove(),как в примере... Вот ссылка на пример с офф. сайта http://knockoutjs.com/examples/contactsEditor.html копирую, вставляю - все прекрасно работает! По аналогии делаю свой простенький интерфейс HTML:
The name is <input data-bind="value: personName" />
<button data-bind="click: add">Add</button>
<ul data-bind="foreach: people">
<li><label data-bind="text: name"></label> <a href='#' data-bind='click: $root.del'> Удалить </a></li>
</ul>
javascript:
var myViewModel = {
personName: ko.observable(0),
people: ko.observableArray([
{"id":"1", "name":"Fries"},
{"id":"2", "name":"Eggs Benedict"},
{"id":"3", "name":"Ham"},
{"id":"4", "name":"Cheese"}
]),
add: function(){this.people.push({'id':'8','name': this.personName()})},
del: function(pep){this.people.remove(pep);}
};
ko.applyBindings(myViewModel);
В моем случае вылетает ошибка Uncaught TypeError: Cannot call method 'remove' of undefined Что я не так делаю? |
Ура, Проблема Решена!
Переписал код след. образом:
HTML
The name is <input data-bind="value: personName" />
<button data-bind="click: add">Add</button>
<ul data-bind="foreach: people">
<li><label data-bind="text: name"></label> <a href='#' data-bind='click: del'> Удалить </a></li>
</ul>
JS
function model() {
self=this;
self.personName=ko.observable(0);
self.people=ko.observableArray([
{"id":"1", "name":"Fries"},
{"id":"2", "name":"Eggs Benedict"},
{"id":"3", "name":"Ham"},
{"id":"4", "name":"Cheese"}
]);
add=function(){this.people.push({id:'8','name': this.personName()})};
del=function(pep){self.people.remove(pep);console.log(pep)};
}
ko.applyBindings(new model());
Все заработало, только не совсем понимаю почему ))) Буду благодарен за пояснения |
|
| Часовой пояс GMT +3, время: 11:48. |