JS / Backbone-我的简单脚本不会在基本模型中触发“验证”

Question

在App.Models.Task中，不会触发validate方法。

测试：编辑任务，然后在弹出窗口中按“取消”。 当您按编辑时，您可以更改任务标题。 取消时，它应该有效并且不删除任务标题。

这是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>

Answer 1

您对editTask方法的以下更改解决了从提示中取消时“已删除任务标题”的问题。 prompt在取消（导致您的问题）时返回null，如下所示：

（ https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt ）

不能完全确定“应该验证”是什么意思，但是下面的代码中的注释建议了验证新标题的位置。

editTask: function() {
    var title = this.model.get('title');
    var newTask = prompt('Change task to : ', title);

    if (newTask) {
      // Run your 'validation' code here? If satisfied, set the title

      title = newTask;
    }

    this.model.set('title', title);
},

Answer 2

使用此代码。它将起作用:)

this.model.set({ title : newTask}, { validate : true }); 

Answer 3

从ribs.js文档 ：

默认情况下，保存检查会在设置任何属性之前进行验证，但是您也可以通过传递{validate：true}作为选项来告知set验证新属性。

提示后，您无需告知模型验证即可在模型上设置值。

this.model.set('title',newTask);

除了传递键值对，您还可以通过提供一个对象来更改属性：

this.model.set({'title': newTask});

另外，您可以将选项传递给set方法，例如以信号通知您要验证：

this.model.set({'title': newTask}, {validate: true});

这将调用您的validate方法，并防止在模型上设置空值。 但是，它不会对您提供的消息做任何事情。 您可以通过提供侦听器来验证错误：

this.model.on('invalid', this.onInvalid, this);

...

onInvalid: function () {
   alert(this.model.validationError);
},

请查看您的代码改编