Продолжая изучать
Knockout, я сделал небольшое учебное приложение, которое позволяет составлять список необходимых покупок.
Принцип работы следующий: пользователь может добавлять продукты в список, для этого необходимо вписать название в поле «Добавить покупку» и нажать кнопку «Добавить». Продукт появится в списке «Нужно купить». В списке можно выбрать продукты, после чего нажать на кнопку «Купить», выбранные продукты из данного списка будут перемещены в список «Куплено». В списке «Куплено» можно выбрать необходимые продукты и нажать кнопку «Удалить», после чего выбранные продукты будут удалены из списка.
Теперь подробнее посмотрим на код:
var ViewModel = function () {
this.Items = ko.observableArray(["Молоко", "Хлеб", "Творог"]);
this.BoughtItems = ko.observableArray(["Морковь","Яблоки"]);
this.SelectedItems = ko.observableArray([]);
this.SelectedBoughtItems = ko.observableArray([]);
this.NewItem = ko.observable("");
this.Buy = function () {
if (this.SelectedItems().length > 0) {
for (var i = 0; i < this.SelectedItems().length; i++) {
this.BoughtItems.push(this.SelectedItems()[i]);
}
this.Items.removeAll(this.SelectedItems());
this.SelectedItems([]);
}
}
this.AddItems = function () {
if (this.NewItem() != "") {
this.Items.push(this.NewItem());
this.NewItem("");
}
}
this.DeleteItems = function () {
if (this.SelectedBoughtItems().length > 0) {
this.BoughtItems.removeAll(this.SelectedBoughtItems());
this.SelectedBoughtItems([]);
}
}
};
ko.applyBindings(new ViewModel());
ViewModel — модель, используемая приложением. В ней можно увидеть:
Items — массив из продуктов, которые необходимо купить;
BoughtItems — массив из продуктов, которые уже были куплены;
SelectedItems — выбранные продукты в списке требуемых для покупки продуктов;
SelectedBoughtItems — выбранные продукты в списке уже купленных продуктов;
NewItem — новый продукт для добавления в список;
Buy — функция, вызываемая при нажатии на кнопку «Куплено»;
AddItems — функция, вызываемая при нажатии на кнопку «Добавить»;
DeleteItems — функция, вызываемая при нажатии кнопки «Удалить»;
Я не буду вставлять HTML часть аднного приложения, по причине того, что сайт вырезает тег
form. Код можно посмотреть в представленном примере на JSFiddle.
Опишу только моменты, на которые стоит обратить внимание:
data-bind="value: NewItem, valueUpdate: 'afterkeydown'" — обновление результата произойдёт сразу при нажатии на клавиши для ввода;
<form data-bind="submit: AddItems"> — функция AddItems будет вызвана при отправке формы;
data-bind="enable: NewItem().length > 0" — кнопка «Добавить» станет активной тогда, когда текст введённый
в поле будет ненулевой.
data-bind="options: Items, selectedOptions: SelectedItems" — SelectedItems будет содержать список выбранных в списке продуктов;