从 Backbone.View 中分离模板逻辑

Question

我刚开始学习 Backbone.js，并且一直致力于（还有什么）一个简单的待办事项应用程序。在这个应用程序中，我想在<ul id="unfinished-taks"></ul> 中显示我的待办事项，每个任务都作为<li> 元素。到目前为止，一切都很简单。

根据我阅读的教程，我应该使用以下内容创建一个视图：

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

这很好用，但是在我的 Javascript 代码中定义我的待办事项的 HTML 标记结构似乎是一种不好的做法。我宁愿完全在模板中定义标记：

// 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> 标记？

Answer 1

如果你只打算渲染一次视图，你可以在.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
});

这里有一些警告：

• Backbone 期望 el 属性是单个元素。我不确定如果您的模板在根中有多个元素会发生什么，但它可能不会是您所期望的。

• 这里重新渲染很困难，因为重新渲染模板会给你一个全新的 DOM 元素，你不能使用$(this.el).html() 来更新现有元素。因此，您必须以某种方式将新元素粘贴到旧元素的位置，这并不容易，并且可能涉及您不希望在.render() 中出现的逻辑。

如果您的 .render() 函数不需要再次使用模板（例如，您可能使用 jQuery 手动更改类和文本），或者您不需要，则这些不一定是显示停止器重新渲染。但是，如果您希望在模型更改时使用 Backbone 的标准“重新渲染模板”方法来更新视图，那将会很痛苦。