Информационный портал

Информационно-новостной портал

Новости рекламы и маркетинга. Новости Интернета.
Море полезной информации на сайте RetailDepartment.ru
Поделиться ссылкой с друзьями

Создаём менеджер контактов на Backbone.js (часть 4)

Twitter
Нравится
RedLine

Мы уже реализовали добавление и удаление моделей из коллекции, а так же настроили синхронизацию данных при их изменении. В этом уроке, реализуем редактирование записей.

Подготовительные работы

Начнём мы с добавления ещё одной кнопки в наш шаблон, с помощью которой будем активировать состояние редактирования данных:

<button class="edit">Edit</button>

Раз мы добавили кнопку, то давайте добавим и новый шаблон, который будем использовать для редактирования модели - это будет специальная форма. Она будет очень похожа на ту, что мы используем для добавления новой записи:

<script id="contactEditTemplate" type="text/template">
<form action="#">
    <input type="file" value="<%= photo %>" />
    <input class="name" value="<%= name %>" />
    <input id="type" type="hidden" value="<%= type %>" />
    <input class="address" value="<%= address %>" />
    <input class="tel" value="<%= tel %>" />
    <input class="email" value="<%= email %>" />
    <button class="save">Save</button>
    <button class="cancel">Cancel</button>
</form>
</script>

Новый шаблон в большинстве своём состоит из элементов <input>, в которых мы будем редактировать данные. Нам не нужно заботиться о подписях (labels) для элементов, мы будем вставлять текст из модели или тот, что должен стоять по умолчанию в сами поля. Заметьте, что мы используем скрытое поле для хранения типа модели. Его мы будем использовать для хранения новой категории пользователя, если такая будет введена.

Теперь нам нужно назначить обработчики кликов по только что добавленным кнопкам; обновите объект события в классе theContactView, добавив следующий код:

"click button.edit": "editContact",
"change select.type": "addType",
"click button.save": "saveEdits",
"click button.cancel": "cancelEdit"

Не забудьте поставить запятую перед вставкой нового кода! Раньше мы уже добавляли подобные записи; каждая пара ключ:значение определяет какое событие следует ожидать и как на него следует реагировать.

Переключение на режим редактирования

Таким же способом мы должны должны наладить связь с функцией, предназначенной для реализации переключения блока отдельного контакта в режим редактирования. Добавьте editTemplate сразу же после свойства template:

editTemplate: _.template($("#contactEditTemplate").html()),

Теперь можем реализовать сами обработчики событий, которые так же поместим в класс ContactView после метода deleteContact(). В первую очередь, добавим метод editContact()

editContact: function () {
    this.$el.html(this.editTemplate(this.model.toJSON()));

    var newOpt = $("<option/>", {
        html: "<em>Add new...</em>",
        value: "addType"
    }),

    this.select = directory.createSelect().addClass("type")
        .val(this.$el.find("#type").val()).append(newOpt)
        .insertAfter(this.$el.find(".name"));

    this.$el.find("input[type='hidden']").remove();
},

Начнём мы реализации editTemplate, которую объявили с помощью Underscore метода template().

Для того чтобы облегчить процесс редактирования контакта, мы так же отобразим элемент селект, с перечислением всех типов записей. В добавок к этому, нам нужно предоставить возможность ввода нового типа записи. Для того чтобы обеспечить данную возможность, мы добавим специальный пункт в элементе select - “Add new...”.

Затем мы создаём новый элемент <select>, используя метод createSelect(), который реализовали раньше. Данный метод сгенерирует элемент <select> с типами записей в элементах <option>. Новое значение типа, мы будем хранить в специальном скрытом поле <input>, которое добавили в шаблон. Затем мы вставляем новый <select> после <input> с именем контакта. Новый элемент селект вставляется как свойства объекта представления, так что мы легко сможем с ним взаимодействовать.

После добавления нового типа в элемент <select>, нам нужно очистить значение скрытого поля.

На данный момент, нажав на кнопку “edit”, вы должны увидеть примерно следующую картину:

Добавляем новый тип

Одним из событий, которое мы прослушиваем, является изменение типа записи в элементе select. Для добавления нового типа, нам нужно заменить элемент <select> на <input>:

if (this.select.val() === "addType") {
    this.select.remove();

    $("<input />", {
        "class": "type"
    }).insertAfter(this.$el.find(".name")).focus();
}

При смене значения <select>, в первую очередь, проверяем является ли это значение равным addType, и если да, то удаляем элемент со страницы и заменяем его <input>-ом. Вставку нового элемента осуществляем через jQuery метод insertAfter().

Обновление Модели

Теперь нам нужно написать обработчик, который примет все изменения и передаст их в модель. Добавьте метод saveEdits() сразу после editContact():

saveEdits: function (e) {
   e.preventDefault();

    var formData = {},
        prev = this.model.previousAttributes();

    $(e.target).closest("form").find(":input").add(".photo").each(function () {

        var el = $(this);
        formData[el.attr("class")] = el.val();
    });

    if (formData.photo === "") {
        delete formData.photo;
    }

    this.model.set(formData);

    this.render();

    if (prev.photo === "/img/placeholder.png") {
        delete prev.photo;
    }

    _.each(contacts, function (contact) {
        if (_.isEqual(contact, prev)) {
            contacts.splice(_.indexOf(contacts, contact), 1, formData);
        }
    });
},

Во-первых, создадим пустой элемент, куда запишем данные, пришедшие из формы.Так же запишем значения previousAttributes модели, которая принадлежит тому представлению, с которым мы сейчас работаем. Свойство модели previousAttributes это то, что предоставляет нам Backbone для того чтобы быстро получить доступ к старым значениям какой-то модели.

Затем извлекаем значение всех полей формы с помощью jQuery метода find() и фильтра :input. Нам не нужны значения кнопок сохранения или отмены записи, так что удаляем их из результата с помощью jQuery метода not().

Когда данные собраны, мы проходимся по ним в jQuery цикле each(), и для каждого вхождения в коллекции, добавляем соответствующее поле в объекте formData.

Если пользователь не указал новое фото, мы не хотим терять доступ к старому, так что удалим соответствующее значение из объекта formData, если пришедшее значение пустое.

Backbone предоставляет специальный метод, который можно использовать для изменения значений атрибутов моделей. Для обновления модели, следует просто вызвать метод set(), передав объект formData. После этого, вызываем метод представления render(), чтобы изменения отразились на странице.

Теперь нам нужно обновить данные в самом массиве, чтобы они не затерялись. Делаем это, как и в предыдущих случаях. Проверяем фотографию на наличие значения по умолчанию, а затем, используя комбинацию Underscore методов each() и isEqaul() находим тот элемент массива, который нужно изменить. Вот тут нам и пригодится поле previousAttributes, значение которого мы сохранили ранее.

Для обновления массива мы воспользуемся нативным JavaScript методом splice(). Как и ранее, находим индекс нужного нам элемента с помощью Underscore метод indexOf() в качестве первого аргумента; функцию обновления информации в качестве второго. На этот раз, передадим и третий аргумент formDataobject. Когда splice() принимает три (или более) аргументов, в третьем параметре передаются данные, которыми будет замещена информация в оригинале.

Отмена редактирования

Напоследок нам осталось реализовать обработку нажатия ещё одной кнопки – кнопки отмены. Данный метод будет очень прост; в нём мы просто уберём форму и переключим контакт на обычный режим отображения. Добавьте данный метод после saveEdits():

cancelEdit: function () {
    this.render();
},

У нас уже есть метод, который выводит значения модели на странице, так что можем воспользоваться им.

Вот и всё что нам нужно было сделать!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/7TgJaRPwcG4/lessons.php

Add comment

Правила добавления комментариев


Security code
Refresh

Download SocComments v1.3