Backbone.js適合從服務器獲取HTML嗎？

據我所知，Backbone.js視圖代表DOM元素。我從現有的DOM中獲取它或在el屬性中動態創建它。Backbone.js適合從服務器獲取HTML嗎？

在我的情況下，我想從服務器採取AJAX請求，因爲我使用Django模板，並不想重寫所有JavaScript模板。

因此我定義了執行AJAX請求的el函數。

el: function() { 
    model.fetch().success(function(response) { 
     return response.template 
    }) 
}

當然，它不起作用，因爲AJAX請求是異步執行的。

這意味着我沒有el屬性，events也不工作。我可以修復它嗎？

也許Backbone.js框架不是我需要的正確工具？我想使用它的原因是爲了代碼有一些結構。

P.S.我是Backbone.js的新手。

來源

2013-02-22 daGrevis

從另一個視圖或直接在使用jquery直接加載頁面之後，以及在您下載模板之後，請使用正確的id/el或其他任何方式實例化您的骨幹視圖類（取決於您的位置存儲你的ajax提取模板）。根據您的使用情況，這可能是也可能不是明智的做法。

另一個也許更典型的方法是使用一些佔位符元素（稱爲「加載」或其他）來設置視圖，然後觸發ajax，並在更新後的模板被檢索後更新視圖（用您請求的實際模板替換佔位符）。

當/如果你更新與新的/其他的DOM元素你的看法，你需要調用視圖的delegateEvents方法重新綁定您的活動，以新的元素，請參閱：

http://backbonejs.org/#View-delegateEvents

來源

2013-02-22 15:50:15

謝謝！問題是，當我點擊'el'中的'button'時，事件不會被解僱。 http://vpaste.net/Cv0Ch – daGrevis 2013-02-22 16:04:35

用delegateEvents信息更新了我的答案，這些信息應該解決有關未開火事件的問題。 – 2013-02-22 16:14:59

再次感謝！我之前也在研究這種方法！這很有趣，它不起作用。 HTML預先添加到body，但事件不會觸發。你可以幫我嗎？ :(http://vpaste.net/zKzHS – daGrevis 2013-02-22 16:25:39

我碰到一個來了類似的要求。在我的例子中，我正在運行asp.net，並希望從用戶控件中提取我的模板。我建議的第一件事就是研究Marionette，因爲它可以幫助您避免在Backbone中編寫大量鍋爐代碼。下一步是重寫模板的加載方式。在這種情況下，我創建了一個使用Ajax從服務器檢索HTML的函數。我找到了一個這個函數的例子，他們用它來拉下html頁面，所以我做了一些修改，以便我可以製作MVC類型的請求。我不記得我從哪裏找到想法;否則，我會在這裏給出鏈接。

function JackTemplateLoader(params) { 
    if (typeof params === 'undefined') params = {}; 
    var TEMPLATE_DIR = params.dir || ''; 

    var file_cache = {}; 

    function get_filename(name) { 
     if (name.indexOf('-') > -1) name = name.substring(0, name.indexOf('-')); 
     return TEMPLATE_DIR + name; 
    } 

    this.get_template = function (name) { 
     var template; 
     var file = get_filename(name); 
     var file_content; 
     var result; 
     if (!(file_content = file_cache[name])) { 
      $.ajax({ 
       url: file, 
       async: false, 
       success: function (data) { 
        file_content = data; // wrap top-level templates for selection 
        file_cache[name] = file_content; 
       } 
      }); 
     } 
     //return file_content.find('#' + name).html(); 
     return file_content; 
    } 

    this.clear_cache = function() { 
     template_cache = {}; 
    }; 

}

第三步是重寫Marionette的加載模板的方法。我在app.addInitializer方法中做了這個。在這裏，我正在初始化我的模板加載器，並將其目錄設置爲路由處理器。所以當我想加載模板時，我只需在我的視圖中設置模板：「templatename」，Backbone將從api/ApplicationScreens/templatename加載模板。我也正在重寫我的模板編譯以使用Handlebars，因爲ASP.net對<％=％>語法沒有留下深刻的印象。

app.JackTemplateLoader = new JackTemplateLoader({ dir: "/api/ApplicationScreens/", ext: '' }); 
    Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (name) { 
     if (name == undefined) { 
      return ""; 
     } else { 
      var template = app.JackTemplateLoader.get_template(name); 
      return template; 
     } 
    }; 
    // compiling 
    Backbone.Marionette.TemplateCache.prototype.compileTemplate = function (rawTemplate) { 
     var compiled = Handlebars.compile(rawTemplate); 
     return compiled; 
    }; 
    // rendering 
    Backbone.Marionette.Renderer.render = function (template, data) { 
     var template = Marionette.TemplateCache.get(template); 
     return template(data); 
    }

希望這會有所幫助。我一直在一個大型的動態網站上工作，並且它非常漂亮。我一直對使用Marionette和Backbone.js的整體功能和流程感到驚訝。

來源

2013-03-08 13:20:07 Kalpers

Backbone.js適合從服務器獲取HTML嗎？

回答

相關問題