骨架.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();