0

コレクションの維持に問題が発生しています。まず、フェッチを介して出席者をコレクションに読み込みます。これにより、既存の出席者がデータベースからコレクションに読み込まれます。ユーザーが新しい出席者を追加できるボタンもあります。出席者が手動で入力されると、フェッチを介してコレクションにロードされたモデルが一掃され、新たに開始されるようです。手動で追加されたすべての出席者がコレクションに入力されるようになりました。ただし、フェッチ ロードされた参加者と手動で追加された参加者の両方がこのリストに入力されるようにしたいと考えています。

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 つのアイテム) が fetch() によってロードされた後:

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

次に、ボタンを使用して出席者を手動で追加すると、コレクションがリセットされたように見えます。

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

2 に答える 2

1

方法はたくさんあるので、うまくいくといいですね。モードをインスタンス化する Backbone メソッドを活用するために、おそらく少し異なる構造にすることもできたでしょうが、コードを機能させることが本当の目標なので、これらは私の考えです:

  • Collectionparse()メソッドでモデルを実際にインスタンス化するのではなくparse、Backbone がモデルをインスタンス化するデータ オブジェクトの配列を返すだけで、

  • ビュー クラスの外側で、AttendeeView 内のコレクションのフェッチを呼び出すのではなく、

  • 1 人の出席者のビューを 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 に答える