Backbone.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」函數調用

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

但是我的AJAX功能，不渲染，因爲「this.el」未定義。現在玩了一段時間後，它看起來像「ajax（..）」函數中的回調無法訪問「this.el」。任何想法如何解決這個問題？

Answer 1

在某些時候，您必須調用渲染方法。你需要像下面的一些代碼：

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

事實上，我將修改它稍微看起來像這樣，從您的視圖中刪除的EL定義：

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

Answer 2

問題是，回調方法在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 
} 

還有其他的方法可以解決這個問題......但我想包括這個筆記，以防萬一。 :)