2013-04-29 54 views
1

我知道如何通過將它們放在單獨的文件中使其外形化來預編譯我的手把模板。最近,我一直在縮短我的模板並使用它們內聯。例如,我有以下的骨幹視圖。帶骨架的預編譯手柄嵌入模板

var ChosenVehicle = Backbone.View.extend({ 
    className: "car selection", 

    initialize: function(options) { 
    this.data = options.chosenData; 
    }, 

    template: Handlebars.compile(
    '<h4 class="number">01</h4>' + 
    '<img src="assets/img/cars/{{vehicleSlug}}.jpg" alt="{{vehicle}}">' + 
    '<p class="flush">' + 
     '<small class="text--center caps">' + 
     '{{vehicle}}' + 
     '</small>' + 
    '</p>' 
), 

    render: function() { 
    var chosenCar = _.find(this.model.get("cars"), function(car) { 
     return car.id.toString() === this.data.vehicleId; 
    }, this); 
    this.$el.html(this.template(chosenCar)); 
    return this; 
    } 
}); 

使用上述而不是預編譯模板的性能分支是什麼?我更喜歡在上面設置我的模板,因爲我發現它更易於閱讀和維護。現在顯然我無法預編譯我的模板,還是有另一種解決方案?

感謝

泰隆

回答

0

那麼,你可能會覺得這是更容易閱讀和維護,但事實並非如此。你不想打開一個JavaScript文件來編輯你的模板/標記;就像你不想打開CSS來調試Javascript一樣(記住expression()?)。

這個想法是通過你的編譯系統預編譯你的模板。如果您通過requireJs加載器插件加載模板,這很容易;例如:

template: require("hbs!templates/listItem") 

您還可以檢出骨幹樣板是怎麼做的現在:https://github.com/tbranyen/backbone-boilerplate(雖然,我們談到了將在不久的將來插件路requireJs)

結帳Github上,瀏覽器的工作示例Backbone Boilerplate模板加載/預編譯:https://github.com/tbranyen/github-viewer

+0

我已經在很多項目中使用了BBB,並且喜歡這個過程,儘管這個版本庫並沒有被更新到最新版本的Backbone和Backbone Layout Manager。無論如何,我正在閱讀與骨幹食譜。本書始終使用內聯模板。我一開始也被它嚇了一跳,直到它迫使我在沒有將模板與實際視圖分離的情況下對簡單簡潔的視圖進行調整。我不一定同意你的第一條陳述,因爲你正在使用javascript來構建你的標記。 – TYRONEMICHAEL 2013-04-29 14:27:40

+0

好吧,然後必須同意。聯繫了編寫Recipes With Backbone的人,並表示他們寫的方式讓讀者更容易理解。他們在構建應用程序時不使用上述模式。然而,在這本書中,它指出'由於這種情況下的模板很小,我們不直接在視圖類中包含可讀性的方式。我們不僅可以使用模板,而且不會出現任何令人不安的