使用Backbone.js驗證模型

Question

在書籍和教程的幫助下，試圖做我自己的Todo列表應用程序。我的問題是，當你添加啊todo時，我的模型應該驗證輸入是否在渲染前帶有一些文本。我創建了驗證Methis Hotel酒店，但它不工作，我不知道如何追蹤錯誤，我會很感激，如果你們能幫助我找到我的錯誤

型號：

var Task = Backbone.Model.extend({ 
    validate: function(attrs){ 
     if(!attrs.title){ 
      return "The task has no title"; 
     } 
    } 
}); 

var task = new Task; 

收藏：

var Tasks = Backbone.Collection.extend({ 
    model: Task 
}); 


var tasks = new Tasks([ 
    { 
     title: 'my task' 
    }, 
    { 
     title: 'my task 1' 
    }, 
    { 
     title: 'my task 2' 
    }, 
    { 
     title: 'my task 3' 
    } 
]); 

瀏覽：

var TaskView = Backbone.View.extend({ 
    tagName: "li", 

    template: _.template($('#task').html()), 

    initialize: function(){ 
     this.model.on("change", this.render, this); 
    }, 

    render: function(){ 
     var template = this.template(this.model.toJSON()); 

     this.$el.html(template); 

     return this; 
    }, 

    events: { 
     'click .icon-checkbox': 'toggleState' 
    }, 

    toggleState: function(e){ 
     var $checkbox = $(e.target); 

     $checkbox.toggleClass('icon-checkbox-unchecked'); 

    } 
}); 

var TasksView = Backbone.View.extend({ 
    el: '#tasks', 

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

    render: function(){ 
     this.collection.each(this.addOne, this); 

     return this; 

    }, 

    addOne: function(task){ 
     var taskView = new TaskView({ model: task }); 
     this.$el.append(taskView.render().el); 
    } 
}); 

var AddTask = Backbone.View.extend({ 
    el: '#todos', 

    events:{ 
     'click #add': 'addTask' 
    }, 

    addTask: function(){ 
     var taskTitle = $('#inputTask').val(); 
     $('#inputTask').val(""); 
     var task = new Task({title: taskTitle}); // create the task model 
     this.collection.add(task); //add the model to the collection   
    } 
}); 


var tasksView = new TasksView({collection: tasks}); 
var addTask = new AddTask({collection: tasks}); 

編輯：

我剛剛意識到，當您在模型中設置或保存信息時，會調用驗證方法，但實際上我想要做的是檢查用戶何時提交待辦事項，如果它帶有文本或ini命令創建和渲染模型。

Answer 1

你從來沒有真正調用validate（）方法。你有沒有看過Backbone Validation插件？作品非常漂亮。

https://github.com/thedersen/backbone.validation

Answer 2

所以我想出了這個解決方案，我不知道這是否是一個很好的做法與否，或者認爲應該給這個，但我所做的是：一旦你推附加任務按鈕addTask方法首先檢查輸入是否包含文本，如果沒有文本，只需將佔位符更改爲：「Todo's不能爲空」，並且不創建模型並呈現其視圖。但是，如果輸入有文本，它會創建模型將它附加到colelction並呈現視圖！

這裏是視圖的新代碼，我希望有人能夠告訴我這是否好，或者如果模型應該驗證這個或任何其他對象應該這個勞動。

代碼：

var AddTask = Backbone.View.extend({ 
    el: '#todos', 

    events:{ 
     'click #add': 'addTask' 
    }, 

    addTask: function(){ 

     var taskTitle = $('#inputTask').val(); 
     $('#inputTask').val(""); //clear the input 

     if($.trim(taskTitle) === ''){ 
      this.displayMessage("Todo's can not be empty"); 
     }else{ 
      var task = new Task({title: taskTitle}); // create the task model 
      this.collection.add(task); //add the model to the collection    
     } 
    }, 

    displayMessage: function(msg){ 
     $('#inputTask').attr("placeholder", msg); 
    } 
});