从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分离模板逻辑

回答

相关问题