主干.js 渲染视图答案

【问题标题】：backbone.js rendering view主干.js 渲染视图
【发布时间】：2011-09-19 08:15:05
【问题描述】：

这是我对 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”。有什么想法可以解决这个问题吗？

【问题讨论】：

“this.el”未定义的原因是因为我错过了“_.bindAll(this, render)”。就像手册所说的上下文一样。

标签： javascript backbone.js

【解决方案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
}

还有其他方法可以解决这个问题......但我想包括这个注释，以防万一。 :)

【讨论】：

我遇到了您的 FYI 中提到的相同问题并最终使用了相同的解决方案...是否有可能在初始化时 DOM 无法准备好？
太棒了...不是我读过的第一篇您的文章...感谢您的博客！

【解决方案2】：

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

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

事实上，我会稍微修改一下，使其看起来像这样，从您的视图中删除 el 定义：

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

【讨论】：