javascript - 渲染嵌套模型 Handlebars ？

Question

我有这样的数据结构。

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

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

{{#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>

类名来自主干 View ，但问题是模板被 div 包装，我不确定如何防止它只是一个 .message 列表。 .我也无法确定为什么有一个空的div，我有怀疑但不能指出它..

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

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

在 Backbone 中，every view与 el 关联。在实例化时，如果您不为 View 提供 el，backbone 将使用一个空的 DIV。我想这就是您的情况。

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

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

阅读来自 Backbone View el documentation 的这段文字

All views have a DOM element at all times (the el property), whether they've already been inserted into the page or not. In this fashion, views can be rendered at any time, and inserted into the DOM all at once, in order to get high-performance UI rendering with as few reflows and repaints as possible. this.el is created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.