backbone.js集合使用

Question

我遇到了维护我的集合的问题。首先，我通过抓取将参加者加载到一个集合中。这会将现有参与者从数据库加载到集合中。我还有一个允许用户添加新参加者的按钮。当手动输入参加者时，似乎通过提取将已加载到集合中的模型清除并重新开始。所有手动添加的与会者现在都会填充该集合;不过，我希望装载和手动添加的参加者都能填充此列表。

var InviteeView = Backbone.View.extend({ 
tagName: "tr", 
initialize: function() { 
    this.collection = new InviteeJSONList();  
    _.bindAll(this, 'render','appendItem','remove','saveInvitee'); 
}, 
events: { 
    "click .removeInvitee":"remove", 
    "click .saveInvitee":"saveInvitee" 
}, 
render: function() { 
    var source = $("#invitee-template").html(); 
    var template = Handlebars.compile(source); 
    var context = inviteeListJSON.attributes['json']; 
    var html=template(context); 

    $(this.el).html(html); 

    return this; 
}, 
appendItem: function() { 
    $("#attendees").append(this.render().el); 
}, 
remove: function() { 
    $(this.el).remove(); 
}, 
saveInvitee: function() { 
    var value = $(this.el).find('select').val(); 
    var model = this.collection.attributes['json']['invitees']; 
    model = model.filter(function(attributes) {return attributes.encrypted_id==value}); 
    var attendee = new Attendee({ 
     user_id: model[0]['id'], 
     meeting_id: '<?=$mid?>', 
     status: 'Uncomfirmed', 
     first_name: model[0]['first_name'], 
     last_name: model[0]['last_name'], 
     email: model[0]['email'], 
     user_uuid: model[0]['encrypted_id'], 
     unavailable_dates: model[0]['unavailable_dates'] 
    }); 

    attendeeView.addAttendeeItem(attendee.attributes) 
    this.remove(); 
} 
}); 

var AttendeeList = Backbone.Collection.extend({ 
model: Attendee, 
url: '<?=$baseURL?>api/index.php/attendees/<?=$mid?>&timestamp=<?=$timestamp?>&userid=<?=$userid?>&apikey=<?=$apikey?>', 
parse: function(response) { 
    if(response!="No History") { 
     $.each(response['attendees'], function(key, value) { 
      attendeeView.addAttendeeItem(value); 
     }); 
     $('.loading_attendees').hide(); 
    } 
    else { 
     $('.loading_attendees').html("No attendees exists for this meeting."); 
    } 
} 
}); 

var AttendeeView = Backbone.View.extend({ 
el: $('body'), 
initialize: function() { 
    _.bindAll(this, 'render','fetchAttendees', 'appendItem', 'addAttendeeItem'); 
    this.counter=0; 
    this.collection = new AttendeeList(); 
    this.collection.bind('add', this.appendItem); 
    this.fetchAttendees(); 
}, 
events: { 
    "click #addInvitee":"appendInvitees", 
}, 
appendInvitees: function() { 
    var inviteeView = new InviteeView(); 
    inviteeView.appendItem(); 
}, 
render: function() { 

}, 
fetchAttendees: function() { 
    this.collection.fetch({ 
     success: function(model, response) { 

     }, 
     error: function(model, response) { 
      $('#loading_attendees').html("An error has occurred."); 
     } 
    }); 
}, 
appendItem: function(item) { 
    var attendeeItemView = new AttendeeItemView({ 
     model: item 
    }); 
    $("#attendees").append(attendeeItemView.render().el); 
    attendeeItemView.updateAttendeeStatusSelect(); 

}, 
addAttendeeItem: function(data) { 
    this.counter++; 
    var attendee = new Attendee({ 
     id: data['id'], 
     user_id: data['user_id'], 
     meeting_id: data['id'], 
     status: data['status'], 
     comments: data['comments'], 
     attended: data['datetime'], 
     first_name: data['first_name'], 
     last_name: data['last_name'], 
     email: data['email'], 
     counter: this.counter, 
     user_uuid: data['user_uuid'], 
     unavailable_dates: data['unavailable_dates'] 
    }); 

    this.collection.add(attendee); 
}, 
}); 

收集后（从REST API装载2项）经由装取（）：

console.log(this.collection.models) outputs: 
[d] 
[d,d] 

然后，当我通过按钮集合似乎重置手动添加与会者：

console.log(this.collection.models) outputs: 
[d] 

Answer 1

我最终通过从集合中删除url参数和解析函数并将其解析到视图中来解决问题。现在一切都按预期工作。

Answer 2

好，它的工作，因为有很多方法可以去。我可能会不同的结构有点利用该实例化模式的骨干方法，但工作的代码才是真正的目标，所以这些都只是我的想法：

• ，而不是实际实例化集合parse()模型方法，只具有parse返回数据对象的数组从骨干网将实例化模型，并引发

• 而不是呼吁为获取里面AttendeeView集合，但视图类外

• 要么有AttendeeView表示单个与会者的观点，或将其命名为AttendeeListView并将它呈现列表

例如：

AttendeeList = Backbone.Collection.extend({ 
... 
    parse: function(response) { 
      // create an array of objects from which the models can be parsed 
      var rawItems = []; 
       $.each(response['attendees'], function(key, value) { 
       rawItems.push({ 
         id: data['id'], 
         user_id: data['user_id'], 
         meeting_id: data['id'], 
         status: data['status'], 
         comments: data['comments'], 
         attended: data['datetime'], 
         first_name: data['first_name'], 
         last_name: data['last_name'], 
         email: data['email'], 
         counter: this.counter, 
         user_uuid: data['user_uuid'], 
         unavailable_dates: data['unavailable_dates'] 
        }); 
       }); 
       return rawItems; 
      }, 
     ... 
     } 

，然后要么使用成功/失败回调：

AttendeeList.fetch(onListFetchSuccess , onListFetchFail); 

或听那个被触发的事件reset：

AttendeeList.on('reset', createAttendeeListView); 

（我没有真正编辑和运行代码，这只是一个大纲）