從Backbone.Device分離模板邏輯

我剛開始學習Backbone.js，並一直在研究（還有什麼）一個簡單的待辦事項應用程序。在這個應用程序中，我想在<ul id="unfinished-taks"></ul>中顯示我的待辦事項，每個任務都顯示爲<li>元素。到目前爲止，這麼簡單。從Backbone.Device分離模板邏輯

據我已閱讀教程，我應該創建具有以下視圖：

// todo.js 
window.TodoView = Backbone.View.extend({ 
    tagName: 'li', 
    className: 'task', 
    // etc... 
});

這工作得很好，但它似乎是不好的做法來定義我的待辦事項的HTML標記結構在我的Javascript代碼中。我寧願在模板完全定義的標記：

// todo.js 
window.TodoView = Backbone.View.extend({ 
    template: _.template($("#template-task").html()), 
    // etc... 
}); 

<!-- todo.html --> 
<script type="text/template" id="template-task"> 
    <li class="task <%= done ? 'done' : 'notdone' %>"><%= text %></li> 
</script>

但是，如果我這樣做的Backbone.js的默認使用tagName: 'div'和包裝所有我的沒用<div>標籤待辦事項。有沒有辦法讓HTMl標記完全包含在我的模板中，而不在每個視圖元素周圍添加非語義的<div>標籤？

來源

2012-02-20 Joshmaker

如果你只打算一次渲染視圖中，您可以手動.initialize()設置視圖的el屬性：

// todo.js 
window.TodoView = Backbone.View.extend({ 
    template: _.template($("#template-task").html()), 

    initialize: function() { 
     this.el = $(this.template(this.model.toJSON())).get(0); 
    }, 

    // etc 
});

有一些注意事項在這裏，雖然：

骨幹期望el屬性是一個單一的元素。我不確定如果你的模板在根上有多個元素會發生什麼，但它可能不會是你所期望的。
此處重新渲染很困難，因爲重新渲染模板會爲您提供一個全新的DOM元素，並且您不能使用$(this.el).html()來更新現有元素。因此，您必須以某種方式將新元素粘貼到舊元素的位置，這並不容易，並且可能涉及.render()中不需要的邏輯。

這些不一定，如果你的.render()功能並不需要再次使用的模板（如也許你更改類和手動的文本，用jQuery），或者如果你不顯示，瓶塞需要重新渲染。但如果您期望在模型更改時使用Backbone的標準「重新呈現模板」方法來更新視圖，那將會很痛苦。

來源

2012-02-20 18:05:01 nrabinowitz

呃，不是我想要的答案，但如果是這樣，我想我必須要麼處理它，要麼使用除骨幹以外的東西 – Joshmaker 2012-02-25 13:54:39

從Backbone.Device分離模板邏輯

回答

相關問題