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

我有一个主干视图，它有一个单击事件来更新集合。在我的控制台中，我可以看到对象正在更新，返回的模型数量正在改变，但是在第一次触发事件后视图保持静态，任何第二次尝试触发它都会给我错误类型错误：文本未定义。作为参考，我在页面底部加载了脚本，并且在其上方是使用下划线的模板

这是我的看法

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

---

下面是一个工作代码，我刚刚添加了初始调用以在末尾获取数据

app.myView.fetchData();

并在“sync”上取消您的.on注释。。。内部初始化

我测试了它，所以你可以看到什么是错误的为你。因此，我看到获取数据的初始呈现，单击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();

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