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); 

（我沒有真正編輯和運行代碼，這只是一個大綱）