Использование базы 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); 
}, 
}); 

После сбора (2 детали, загруженные из REST API) загружается с помощью выборки():

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

Затем, когда я вручную добавить слушателя с помощью кнопки коллекции, кажется, чтобы сбросить:

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

Answer 1

Я закончил решение проблемы, удалив параметр url и функцию синтаксического анализа из коллекции и в представление. Теперь все работает так, как ожидалось.

Answer 2

Хорошо, что он работает, поскольку есть много способов пойти. Я бы, наверное, структурированы это немного по-другому, чтобы использовать методы Магистральная, что создания экземпляров режима, но рабочий код является реальной целью, так что это только мои мысли:

• Вместо того, на самом деле создать экземпляр модели в коллекции parse() метод, просто есть parse возвращает массив объектов данных, из которых Backbone бы создать экземпляр модели, и вызвать

• Вместо называть выборки для сбора внутри 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); 

(Я фактически не редактировал и не запускал код, это всего лишь контур)