渲染嵌套模型车把？答案

【问题标题】：Rendering a nested model handlebars?渲染嵌套模型车把？
【发布时间】：2014-03-22 02:31:40
【问题描述】：

我有这样的数据结构。

var myModel {
    _id: 798698,
    username: "John",
    message: {
        message1: "Some cool messsage",
        message2: "I'm mad Ohio State lost"
    }
}

message 对象有点棘手。在我的车把模板中。

{{#each message}}
    <div class="message">
        {{../username}}: {{this}}
    </div>
{{/each}}

那么当它渲染的时候，输出是这样的。

<div class="NCAA">
    <div class="NBA">
        <div class="message">steve: What?</div>
        <div class="message">steve: Okay?</div>
        <div class="message">steve: Hey</div>
    </div>

    <div class="NBA"></div>

    <div class="NBA">
        <div class="message">
            Iowastate: Hey nikeman
        </div>
    </div>
</div>

类名来自主干视图，但问题是模板被 div 包装，我不知道如何防止它只是.message.. 的列表。我也无法确定原因有一个空的 div，我有怀疑，但不能指点它..

这是主干视图代码，只是为了向您展示事物是如何呈现的。

var Marionette = require('backbone.marionette');

var ChatView = Marionette.ItemView.extend({
    className: 'NBA',
    template: require('../../templates/message.hbs')
});

module.exports = CollectionView = Marionette.CollectionView.extend({
    className: 'NCAA',
    initialize: function() {
        this.listenTo(this.collection, 'change', this.render);
    },
    itemView: ChatView
});

【问题讨论】：

标签： javascript backbone.js handlebars.js

【解决方案1】：

在 Backbone 中，every view 与一个 el 相关联。在实例化时，如果您没有为视图提供 el，则主干使用空的 DIV。我想这就是你的情况。

因此，在您的视图实例化时，只需提供一个像这样的 el 元素：

var myView = new ChartView({ el: $('.myElementForView') })

从Backbone View el documentation阅读本文

所有视图始终都有一个 DOM 元素（el 属性），无论它们是否已经插入到页面中。以这种方式，视图可以随时渲染，并一次性插入到 DOM 中，以便在尽可能少的重排和重绘的情况下获得高性能的 UI 渲染。 this.el 是从视图的 tagName、className、id 和 attributes 属性（如果指定）创建的。如果不是，el 是一个空的 div。

【讨论】：

哦，好的，谢谢，我看到了，但我认为由于我的数据结构，它正在添加 div.. 谢谢
我其实已经知道了，但是看看我的模型结构。我需要提出一个新问题。
防止 Backbone 将视图包裹在 el 中的唯一方法是给它一个。这就是 View 的 el 属性的用途 - backbonejs.org/#View-el。如果您指定 View 的 el 属性，只需确保在实例化 View 时元素存在。但是，我相信当您让 Backbone 创建自己的el 时，您会获得稍微更好的性能，因为它将创建一个分离的节点并提前完成所有渲染。然后它可以一次将 HTML 插入到页面中，最大限度地减少页面重绘等。
@TNguyen 你是对的。这是我在回答中提到的。此外，您也可以这样做。 $('someElement').html(myView.render()) 覆盖渲染方法以从视图中返回 el 的标记
是的，你的答案是正确的。我只是为迈克尔提供更多细节。