Блог Андрея Амельченя

Продолжая изучать 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 будет содержать список выбранных в списке продуктов;