0
我正在做一個教程，我的問題是在我的代碼的最底層，你實例化一個新的App.Views.AddTask視圖它不工作，因爲當你點擊提交頁面重新加載和e。 preventDefault（）不起作用。如果我只是在控制檯中輸入新的App.Views.AddTask，那麼e.preventDefault（）將起作用，頁面不會提交導致此問題無法正常工作的原因。我的問題是在底部的adTaskView變量。視圖沒有實例化
(function() {
window.App = {
Models: {},
Collections: {},
Views: {}
};
window.template = function(id) {
return _.template($('#' + id).html());
}
App.Models.Task = Backbone.Model.extend({
validate: function(attrs) {
if(!$.trim(attrs.title)) {
return 'A task requires a valid title.'
}
}
});
App.Collections.Tasks = Backbone.Collection.extend({
model: App.Models.Task
})
App.Views.Tasks = Backbone.View.extend({
tagName: 'ul',
render: function() {
this.collection.each(this.addOne, this);
return this;
},
addOne: function(task) {
var taskView = new App.Views.Task({model: task});
this.$el.append(taskView.render().el);
}
})
App.Views.Task = Backbone.View.extend({
tagName: 'li',
template: template('taskTemplate'),
initialize: function() {
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
},
events: {
'click .edit': 'editTask',
'click .delete': 'destroy'
},
editTask: function() {
var newTask = prompt('What would you likje to change the text to?', this.model.get('title'));
if(!$.trim(newTask)) return;
this.model.set('title', newTask);
},
destroy: function() {
this.model.destroy();
},
remove: function() {
this.$el.remove();
},
render: function() {
var template = this.template(this.model.toJSON());
this.$el.html(template);
return this;
}
})
window.tasksCollection = new App.Collections.Tasks([
{
title: 'Go tot the store',
priority: 4
},
{
title: 'Feed the dog',
priority: 2
},
]);
// PROBLEM WITH THIS PART
App.Views.AddTask = Backbone.View.extend({
el: '#addtask',
events: {
'submit': 'submit'
},
initialize: function() {
},
submit: function(e) {
e.preventDefault();
console.log('hit');
var newTaskTitle = $(e.currentTarget).find('input[type=text]').val();
var task = new App.Models.Task({ title: newTaskTitle});
this.collection.add(task);
}
});
var tasksView = new App.Views.Tasks({ collection: tasksCollection});
var addTaskView = new App.Views.AddTask({ collection: tasksCollection });
$(document).ready(function() {
$('.tasks').html(tasksView.render().el);
});
})();
形式：
<form action="" id="addtask">
<input type="text" name="task" id="task" />
<button type="submit">Add Task</button>
</form>