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

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

获取数据和注释去掉，你.on('sync', ...内initialize

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

我用jsbin对它进行了测试，所以你可以看到什么是w对你来说错了。因此，我看到提取数据的初始渲染，然后单击#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();