Этот видеоурок мы посвятим завершению нашего 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