jquery - jQuery DOM イベントがバックボーン ビューで機能しない

Question

ビュー内の要素を再レンダリングするたびに呼び出されるビューがあります。ここにコードの一部があります:

Project.Views.CheckinScheduledView = Backbone.View.extend({
tagName: 'div',
id:'CheckinScheduledView',
className:'section',
checkinsHtml: '',

initialize: function() {
    _.bindAll(this);

    this.checkinsCollections = new Project.Collections.Checkins();

    this.checkinsCollections.on('reset', this.render);
    this.checkinsCollections.fetch();
},

events: {
    'click .scheduled_checkin a':'deleteCheckin'
},

render: function() {
    var that = this;

    // HERE IS THE PROBLEM
    if($('li.scheduled_checkin').length) {
        $('li.scheduled_checkin').each(function() {
            $(this).css('display','none').empty().remove();
        });
    }



    if(Project.InfoWindow.length) {
        Project.InfoWindow[0].close();
    }

    _.each(this.checkinsCollections.models, function(item) {
        that.renderLocation(item);
    });

    $(this.el).html(this.template());
    this.renderCheckins();
    return this;
},

refreshData: function() {
    this.checkinsCollections.fetch();
}

これはケースです：

1. ホームページを開く
2. チェックインをクリックします（現在のビューコード）
3. 家に帰る
4. ビューはレンダリングしますが、アイテムをリストに追加します

画像

初めてビューをロードする

別のビューに移動して、このビューに戻ったとします。

そしてまた ：（

Answer 1

この関数で、HTML の例を動作させずに jsfiddle から:

renderLocation: function(location) {
    this.checkinsHtml = this.checkinsHtml+'<li class="scheduled_checkin"><a data-id="'+location.attributes.scheduleId+'" href="#/checkin/" title="Delete: '+location.attributes.description+'">'+location.attributes.title+'</a></li>';
}

ビューを再レンダリングするときに this.checkinsHtml をリセットするのを忘れたと思います。

編集: より良い方法として、テンプレートから html をレンダリングする必要があります。

Mustache.js を使用した例

var template = '{{#models}}' +
               '<li class="scheduled_checkin">' +
                   '<a data-id="{{attributes.scheduleId}}" href="#/checkin/" title="Delete: {{attributes.description}}">{{attributes.title}}</a>' +
               '</li>' +
               '{{/models}}';
$('#scheduled_checkins .two-columns').html(Mustache.render(template, this.checkinsCollections));