Главная

Webmacter V.2 Всё для вебмастера » Уроки по JS » Backbone.js 16 — добавление задач

Backbone.js 16 — добавление задач

Backbone.js 16 — добавление задач


Этот видеоурок мы посвятим завершению нашего to-do приложения и научимся добавлять в него новые задачи.




Начнем с того, что создадим новый вид AddTask. И зададим ему корневой элемент:
   App.Views.AddTask = Backbone.View.extend({
        el: '#addTask',

        initialize: function() {
        }

    });

Теперь нам нужно сверстать форму добавления новых задач, которая и является корневым элементом нашего вида:
<form action="" id="addTask">
	<input type="text" placeholder=";Ваша новая задача">
	<input type="submit" value="Добавить задачу">
</form>

Следующим шагом будет навешивание события, при котором происходит добавление. Сначала забьем в переменную newTaskTitle значение поля, в которое вводится новая задача:
    App.Views.AddTask = Backbone.View.extend({
        el: '#addTask',

        events: {
            'submit' : 'submit'
        },

        initialize: function() {
        },

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

            var newTaskTitle =  $(e.currentTarget).find('input[type=text]').val();
            console.log(newTaskTitle);
        }

    });

Сразу же инициализируем наш вид и отдадим ему коллекцию уже существующих задач:
var addTaskView = new App.Views.AddTask({ collection: tasksCollection });

Затем, создадим новый экземпляр модели Task и в качестве атрибута title, добавим newTaskTitle. И сразу же добавим эту модель в коллекцию:
    App.Views.AddTask = Backbone.View.extend({
        el: '#addTask',

        events: {
            'submit' : 'submit'
        },

        initialize: function() {
        },

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

            var newTaskTitle =  $(e.currentTarget).find('input[type=text]').val();
            
            var newTask = new App.Models.Task({ title: newTaskTitle });
            this.collection.add(newTask);

        }

    });

Осталось только поставить прослушку события изменения нашей коллекции. Стоять она будет в виде Tasks, отвечающим за весь список задач. То есть как только, в коллекцию с задачами добавляется новая, мы должно тут же отрендерить html дополнительной задачи и в DOM-дереве:
    App.Views.Tasks = Backbone.View.extend({
        tagName: 'ul',

        initialize: function() {
          this.collection.on('add', this.addOne, this );
        },

        ....

        addOne: function(task) {
            // создавать новый дочерний вид
            var taskView = new App.Views.Task({ model: task });
            // добавлять его в корневой элемент
            this.$el.append(taskView.render().el);
        }
    });

Все. Наше to-do приложение готово. Оно может динамично изменять, удалять и добавлять новые задачи.

Источник:loftblog
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.