Question

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

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>

Answer 1

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

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

不完全确定'VALIDATE'的含义，但下面代码中的注释会建议验证新标题的位置。

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

来自backbonejs docs：

默认情况下，在设置任何属性之前保存检查验证，但您也可以通过传递{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);
},

请参阅adaptation of your code

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

3 个答案: