渲染嵌套模型把手？

Question

我有这样的数据结构。

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
});

Answer 1

在骨干网中， 每个视图都与一个el相关联。 在实例化时，如果不为视图提供el，则骨干网将使用空DIV。 我想这就是您的情况。

因此，在实例化视图时，只需提供如下的el元素：

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

从Backbone View el文档中阅读此文本

所有视图始终都具有DOM元素（el属性），无论它们是否已经插入到页面中。 以这种方式，视图可以随时呈现，并一次全部插入到DOM中，从而以尽可能少的重排和重画获得高性能的UI呈现。 this.el是从视图的tagName，className，id和attributes属性（如果指定）创建的。 如果不是，则el为空div。