首次觸發事件后，主干視圖不會更新

Question

我有一個骨干視圖，該視圖具有單擊事件以更新集合。 在我的控制台中，我可以看到該對象正在更新並且返回的模型數量正在更改，但是在第一次觸發該事件之后，該視圖保持靜態，並且任何第二次嘗試觸發它都會給我帶來TypeError: text is undefined錯誤TypeError: text is undefined 。 作為參考，我在頁面底部加載了腳本，模板（使用下划線）位於頁面上方。

這是我的看法

app.MyView = Backbone.View.extend({
el: 'body',
events: {
    'click #submit': 'fetchData'
},
initialize: function() {

    this.collection = new app.MyCollection();

    // On my first attempt, I tried having a the render tied to the sync event when the view initiated, although the sync event doesn't actually occur until something is clicked
    // this.collection.on('sync', this.render, this);
},
render: function() {
    console.log('rendering');

    var schedule = $('#schedule');
    var template = _.template($('#times-template').html());
    schedule.html(template({ collection: this.collection.toJSON() }));
},
fetchData: function() {

    that = this;

    stationQuery.station_start      = $('#start').val();
    stationQuery.station_end        = $('#end').val();

    var query = stationQuery;

    this.collection.fetch({
        data: query,
        success: function(collection, response) {
            console.log('fetching data');
            console.log(collection);

            // attempt #2 - moving the sync event to the success callback of fetch doesnt allow the view to update a second time either
            // collection.on('sync', that.render, that);

        },
        error: function(collection, response) {
            console.log('error on fetch', response);
        }
    });
},
});

app.myView = new app.MyView;

// Third attempt, this time checking if listenTo will allow the view to update every time the event is fired. It still only works on the first time and fails to render for consecutive clicks, even though the console is showing updated models
app.myView.listenTo(app.myView.collection, 'sync', app.myView.render);

Answer 1

下面是一個工作代碼，我剛剛添加了初始調用以最后獲取數據

app.myView.fetchData();

和注釋去掉，你的.on('sync', ...里面initialize

this.collection.on('sync', this.render, this);

我用jsbin進行了測試，這樣您就可以了解問題所在。 結果，我看到了獲取數據的初始呈現，然后單擊#submit將重新獲取並重新呈現視圖。

app.MyView = Backbone.View.extend({
el: 'body',
events: {
    'click #submit': 'fetchData'
},
initialize: function() {

    this.collection = new app.MyCollection();

    // Here is a binding to each fetch data and on success render view
    this.collection.on('sync', this.render, this);
},
render: function() {
    console.log('rendering');

    var schedule = $('#schedule');
    var template = _.template($('#times-template').html());
    schedule.html(template({ collection: this.collection.toJSON() }));
},
fetchData: function() {

    that = this;
    var stationQuery = {};
    stationQuery.station_start      = $('#start').val();
    stationQuery.station_end        = $('#end').val();

    var query = stationQuery;

    this.collection.fetch({
        data: query,
        success: function(collection, response) {
            console.log('fetching data');
        },
        error: function(collection, response) {
            console.log('error on fetch', response);
        }
    });
},
});

app.myView = new app.MyView;

// Here is first call to fetch data and on success render view
app.myView.fetchData();