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>