Question

我正在使用Backbone应用程序，我允许用户添加多个项目。

这是模型：

//Model
    var Item = Backbone.Model.extend({
      defaults: {
        part1: 'hello',
        part2: 'world'
      },
      validate: function (attr, options) {
        var error = '';
        //console.log(attr);
        if(attr.part2 == "world1"){
          this.trigger('err:world1');
          error = 'world 1 error';
        }
        if(attr.part2 == "world3"){
          this.trigger('err:world3');
          error =  'world 3 error';
        }
      }
    });

收集：

 //Collection
    var List = Backbone.Collection.extend({
      model: Item,

      validateModels: function() {
        var cloneCollection = this.clone();
        var errorModels = this.filter(function(m) {
          if (!m.isValid()) {
            return m;
          }
        });
        // cloneCollection.remove(errorModels);
        return cloneCollection;
      }
    });

我允许用户在视图中添加/删除项目：

//Item View
    var ItemView = Backbone.View.extend({
      tagName: 'li', // name of tag to be created        

      events: {
        'click span.swap':  'swap',
        'click span.delete': 'remove'
      },    

      initialize: function(){
        _.bindAll(this, 'render', 'unrender', 'swap', 'remove'); // every function that uses 'this' as the current object should be in here

        this.model.bind('change', this.render);
        this.model.bind('remove', this.unrender);

        this.model.on('err:world1', this.world1Err);
        this.model.on('err:world3', this.world3Err);
      },

      render: function(){
        $(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span> <span class="error" style="color:red; font-family:sans-serif;"></span>');
        return this; // for chainable calls, like .render().el
      },

      unrender: function(){
        $(this.el).remove();
      },

      swap: function(){
        var swapped = {
          part1: this.model.get('part2'),
          part2: this.model.get('part1')
        };
        this.model.set(swapped);
      },

      remove: function(){
        this.model.destroy();
      },

      world1Err: function(){
        alert('World 1 Err');
        //console.log(this);
      },

      world3Err: function(){
        alert('World 3 Err');
      }
    });

//Composite View
    var ListView = Backbone.View.extend({
      el: $('body'), // el attaches to existing element
      events: {
        'click button#add': 'addItem',
        'click  button#save': 'saveCollection'
      },

      initialize: function(){
        _.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here

        this.collection = new List();
        this.collection.bind('add', this.appendItem); // collection event binder

        this.counter = 0;
        this.render();
      },

      render: function(){
        var self = this;
        $(this.el).append("<button id='add'>Add list item</button>");
        $(this.el).append("<button id='save'>SAVE</button>");
        $(this.el).append("<ul></ul>");
        _(this.collection.models).each(function(item){ // in case collection is not empty
          self.appendItem(item);
        }, this);
      },

      addItem: function(){
        this.counter++;
        var item = new Item();
        item.set({
          part2: item.get('part2') + this.counter // modify item defaults
        });
        this.collection.add(item);
      },

      appendItem: function(item){
        var itemView = new ItemView({
          model: item
        });
        $('ul', this.el).append(itemView.render().el);
      },

      saveCollection: function(){
        var collectionLength = this.collection.length;
        if(collectionLength > 0){
          this.collection.validateModels();
          //console.log(status);
        } 
        else
          alert('Collection is empty. Please add something.');
      }

    });

现在，当用户启动应用程序时，他/她将看到屏幕：

当用户点击“添加”时，项目将添加如下：

我已经进行了硬编码验证，当用户点击保存时，第一个和第三个添加元素会返回错误。

我遇到的问题是如何仅在该特定项目视图中显示这些错误。 例如，如果第一和第三项出现错误，那么模型会返回该错误，但我想映射该错误错误仅限于第一和第三列表项，非常类似：

请帮我建议接近它的方法。提前谢谢！

更新 我找到了解决方法。因此，无论何时出现验证错误，我都会执行以下操作：

world1Err: function(){
        this.$el.find('span.error').text('Error Occured.')
      },

Answer 1

需要注意的关键事项：

请勿使用$(this.el)，而是使用this.$el
使用listenTo代替on（bind）以避免内存泄漏（增加的优势是回调将以侦听器作为上下文触发，在您的情况下为view ）
除非您知道自己在做什么并自行处理所有事情，否则不要覆盖remove Backbone.View方法

聪明的举动：

使用主干事件哈希绑定的事件处理程序的默认上下文是视图本身，以及listenTo的使用，无需使用_.bindAll
Backbone集合lots of underscore methods built in，您可以this.collection.each代替_(this.collection.models).each
您可以随意使用它，使用template方法而不是手动生成模板
您可以快速执行this.$(selector)而不是this.$el.find(selector)，$(selector, this.el)等
无需手动创建像new Item()这样的模型实例，设置它的属性然后将其添加到集合中，只需将属性传递给集合add方法，它就是＆＃39; ll在内部创建一个模型实例
您可以使用集合长度而不是手动跟踪计数属性

<强>建议：

不要使用内联样式
让项目视图呈现自己，并使用view.el而不是view.render().el（我真的不知道是谁发明了这种方式或原因）

您可以如下所示概括您的代码：

＆＃13;

var Item = Backbone.Model.extend({
  defaults: {
    message: 'hello world',
    count: 0
  },
  validate: function(attr, options) {
    if (attr.count % 2 != 0) {
      this.trigger('err', this.get('message') + attr.count + ' error');
    }
  }
});

var List = Backbone.Collection.extend({
  model: Item,
  validateModels: function() {
    this.each(function(m) {
      m.isValid(); // invoke models validate method
    });
  }
});

var ItemView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($('#item').text()),
  events: {
    'click span.swap': 'swap',
    'click span.delete': 'remove' // triggers view's built in remove method
  },
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'err', this.errorHandler);
    this.render();
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  swap: function() {
    var words = this.model.get('message').split(' ');
    this.model.set({
      message: words.reverse().join(' ')
    });
  },
  errorHandler: function(msg) {
    this.$('span.error').text(msg)
  }
});

var ListView = Backbone.View.extend({
  template: $('#itemView').text(),
  events: {
    'click button#add': 'addItem',
    'click  button#save': 'saveCollection'
  },
  initialize: function() {
    this.collection = new List();
    this.listenTo(this.collection, 'add', this.appendItem);
    this.render();
  },
  render: function() {
    this.$el.html(this.template);
    this.collection.each(function(model) {
      this.appendItem(model);
    }, this);
  },
  addItem: function() {
    this.collection.add({
      count: this.collection.length
    }, {
      validate: true
    });
  },
  appendItem: function(item) {
    this.$('ul').append(new ItemView({
      model: item
    }).el);
  },
  saveCollection: function() {
    if (this.collection.length > 0) {
      this.collection.validateModels();
    } else
      alert('Collection is empty. Please add something.');
  }
});
new ListView().$el.appendTo('body');

＆＃13;

li span {
  font-family: sans-serif;
}
span.control {
  cursor: pointer;
}
span.swap {
  color: blue;
}
span.delete {
  color: orange;
}
span.error {
  color: red;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/template" id="item">
  <span><%=message%> <%=count? count: ''%></span>
  <span class="swap control">[swap]</span>
  <span class="delete control">[delete]</span> 
  <span class="error"></span>
</script>
<script type="text/template" id="itemView">
  <button id='add'>Add list item</button>
  <button id='save'>SAVE</button>
  <ul></ul>
</script>

＆＃13;

Backbone：在VIEW上显示集合中每个模型的验证错误

1 个答案: