Question

加载视图时，收集长度始终返回1，而解析函数中当前显示3个成员。我想知道问题是否是嵌套项目视图，但似乎没有相同的行为！我不明白为什么self.push（成员）不会将模型添加到集合中！有点困在这里，有什么帮助吗？

模型

define([
'backbone'
], function(Backbone) {
'use strict';

var MemberModel = Backbone.Model.extend({
  id: "_id"

});

return MemberModel;

});

该集合

define([
'backbone', 
'models/MemberModel' 
], function(Backbone, MemberModel) {
'use strict';

var Members = Backbone.Collection.extend({
  model: MemberModel,
  url: '/api/v1/users',

  parse: function(response, options) {
     var self = this;

     _.each(response.users, function(item){
        var member = new self.model();
        member.set('email', item.email);
        member.set('firstname', item.firstname);
        member.set('lastname', item.lastname);
        member.set('group', item.group);
        member.set('city', item.city);

        // shows every member's emails
        console.log('member.email='+member.get('email'));
        self.push(member);

     });

     console.log('this.length='+this.length); // this is always equal to 1
     return this.models;

  }

});

return Members;


});

视图

define([
'collections/members',                        
'views/membersItem',
'text!templates/members.html'
], function(MembersCollection, MembersItem, membersTpl) {
'use strict';

var Members = Backbone.View.extend({
  el: '#settings-content',
   template: _.template(membersTpl),

  events: {
     'click #edit-member': 'editMember'
  },

  initialize: function() {     
     this.collection = new MembersCollection(); 

     this.render();
  },

  render: function() {
     this.$el.html(this.template(this.model.toJSON()));

     var self = this;

     this.collection.fetch({
        success: function() {
           self.renderMember();
        }
     });

     return this;
  },

  renderMember: function() {     
     // same here collection length = 1
     console.log('collection.length:'+this.collection.length);

     _.each(this.collection.models, function (item) {
        var memberView = new MembersItem({model: item});
        $('.list-item', this.el).append(memberView.render().el);
     }, this);

  }


});

return Members;
});

嵌套项目视图

define([                    
'text!templates/members_item.html'
], function(membersItemTpl) {
'use strict';

var MembersItem = Backbone.View.extend({
  tagName: "tr",
  className: '.item',
   template: _.template(membersItemTpl), 

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

  render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
  }

 });

 return MembersItem;
});

Answer 1

看起来问题在于集合中的重复id's。它应该是唯一标识符。

在模型中设置 idAttribute ，并确保有问题的3个对象的ID不同。

var MemberModel = Backbone.Model.extend({
  idAttribute: "_id"

});

如果您的ID重复，则模型将不会添加到模型中。

如果不起作用，请尝试明确设置id属性

 _.each(response.users, function(item, index){
        var member = new self.model();
        member.set('_id', index);

使用嵌套视图，骨干集合长度始终设置为1

1 个答案: