0

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

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

在通过 fetch() 加载集合（从 REST API 加载的 2 个项目）之后：

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

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

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

2 回答 2

1

很好，它正在工作，因为有很多路要走。我可能会采用不同的结构来利用实例化模式的 Backbone 方法，但工作代码是真正的目标，所以这些只是我的想法：

  • parse()与其在 Collection方法中实际实例化模型，不如parse返回一个数据对象数组，Backbone 将从该数组中实例化模型，并触发一个

  • 而不是在 AttendeeView 内部调用 Collection 的 fetch，而是在 View 类外部调用

  • 要么让 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 );

（我实际上并没有编辑和运行代码，这只是一个大纲）

于 2012-09-26T04:18:36.930 回答
0

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

于 2012-09-26T00:24:34.033 回答