2011-09-19 148 views
1

這是我爲骨幹Backbone.js的渲染視圖

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」。任何想法如何解決這個問題?

+0

「this.el」未定義的原因是因爲我錯過了「_.bindAll(this,render)」。就像手冊說的那樣。 – ericbae

回答

0

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

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

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

var view = new RepoListView({ 
    el: $('#wrapper') 
}); 
view.render(); 
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 
} 

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

+0

我遇到了同樣的問題,在你的FYI注意到,並最終使用相同的解決方案...有沒有機會在初始化DOM不準備好? – timborden

+1

如果你在DOM準備好之前初始化視圖,那麼是的:)看到這篇博文:http://lostechies.com/derickbailey/2011/11/09/backbone-js-object-literals-views-events-jquery - 和 - 埃爾/它應該填補你有關這個更多的信息。 –

+0

太棒了......不是我讀過的第一篇文章......感謝博客! – timborden