事件第一次触发后主干视图不更新

Question

我有一个主干视图，它有一个单击事件来更新集合。在我的控制台中，我可以看到正在更新的对象并且返回的模型数量正在发生变化，但是在第一次触发事件后视图保持静态并且任何第二次尝试触发它都会给我错误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();

并在initialize 中取消注释您的.on('sync', ...

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();