Question

这是我对Backbone的看法

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。

仅供参考 - 您可能会遇到与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();

backbone.js渲染视图

2 个答案: