0
App.Models.Taskでは、validateメソッドは起動しません。JS /バックボーン - 私の単純なスクリプトはベースモデルで "validate"を発しません
TO TEST：タスクを編集し、ポップアップウィンドウでキャンセルを押します。 編集を押すと、タスクのタイトルを変更できます。 キャンセルすると、タスクのタイトルは削除されません。
ここでは、jsFiddleにここにある： https://jsfiddle.net/michaelwjoyner/x4xc7rpz/1/
(function(){
window.App = {
Models:{},
Views :{},
Collections:{}
};
window.template = function(){
return Handlebars.compile('{{title}} <button class="edit">Edit</button> <button class="delete">Delete</button>');
};
App.Models.Task = Backbone.Model.extend({
validate: function(attrs) {
if (! attrs.title) {
return 'A task requires a title';
}
}
});
App.Views.Tasks = Backbone.View.extend({
tagName: 'ul',
render: function(){
this.collection.each(this.addOne, this);
return this;
},
addOne: function(task){
// creating a new node view
var taskView = new App.Views.Task({ model : task });
// append to the root element
this.$el.append(taskView.render().el);
}
});
App.Views.Task = Backbone.View.extend({
tagName : 'li',
events : {
'click .edit' : 'editTask'
},
initialize : function(){
this.model.on('change', this.render, this);
},
editTask : function(){
var newTask = prompt('Change task to : ',this.model.get('title'));
this.model.set('title',newTask);
},
render : function() {
console.log('rendered');
compiler = template('taskTemplate');
html = compiler(this.model.toJSON());
this.$el.html(html);
return this;
}
});
App.Collections.Task = Backbone.Collection.extend({
model : App.Models.Task
});
var tasksCollection = new App.Collections.Task([
{
title: 'Go to the store',
priority: 4
},
{
title: 'Cut Hair',
priority: 4
},
{
title: 'Go to Kingdom Hall',
priority: 4
},
]);
var tasksView = new App.Views.Tasks({collection : tasksCollection});
$(document).ready(function() {
$("#tasks").html(tasksView.render().el);
});
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="js/main.js"></script>
<!-- Setup our templates -->
<h1>Tasks</h1>
<div id="tasks">
</div>
</head>
<body>
</body>
</html>
骨格がvalidateメソッドを持つようになっている参照してください。私のApp.Models.Taskには、発火していない検証メソッドがあります。私は使用することができますビューから：this.method.validate、しかし私はそれが正しく動作するようにしたい –