骨架.js渲染视图

Question

这是我对骨干网的看法

var RepoListView = Backbone.View.extend({
  el: $('#wrapper'),

  events: {
    "click #more_repos" : "get_more_repos"
  },

  get_more_repos: function() {
    ajax(get_repo_url, {offset:2}, this.render);
  },

  render: function(result) {
    var template = Handlebars.compile($("#repos_hb").html());
    $(this.el).find('#main_content').append(template({repos: result}));
    return this;  
  }
});

这是我从“ get_more_repos”函数调用的ajax函数

function ajax(url, data, post_ajax_function) {
  $.ajax({
    url: url, 
    data: data,
    dataType: 'json',
    success: function(result){
      post_ajax_function(result);
    }
  });    
}

但是，它不是渲染的，因为“ this.el”是未定义的。 现在，在玩了一段时间之后，看起来“ ajax（..）”函数中的回调无法访问“ this.el”。 有什么想法可以解决这个问题吗？

Answer 1

问题是回调方法是在ajax调用的上下文中执行的，而不是在视图的上下文中执行的。 您需要在视图的初始化程序中使用_.bindAll方法来更正此问题：

var RepoListView = Backbone.View.extend({
  el: $('#wrapper'),

  events: {
    "click #more_repos" : "get_more_repos"
  },

  initialize: function(){
    _.bindAll(this, "render");
  },

  get_more_repos: function() {
    ajax(get_repo_url, {offset:2}, this.render);
  },

  render: function(result) {
    var template = Handlebars.compile($("#repos_hb").html());
    $(this.el).find('#main_content').append(template({repos: result}));
    return this;  
  }
});

这将使render方法设置为始终在视图的上下文中执行，即使您将this.el用作回调，也将使您能够访问this.el

仅供参考-您可能会遇到与el有关的另一个问题。 如果您的视图是在DOM完成加载之前定义的，则对$("#wrapper")的jQuery调用将找不到任何内容。 为了解决这个问题，我通常也将jquery调用放入视图初始化程序中。

initialize: function(){
  this.el = $("#wrapper");
  // ... other stuff here
}

还有其他解决方法...但是我想包括此注释，以防万一。 :)

Answer 2

在某些时候，您必须调用render方法。 您将需要以下代码：

var view = new RepoListView();
view.render();

实际上，我会对其稍作修改以使其看起来像这样，从您的视图中删除el定义：

var view = new RepoListView({
    el: $('#wrapper')
});
view.render();