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

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

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

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

从Backbone View el documentation

阅读此文字

所有视图始终都有一个DOM元素（el属性），无论它们是否已经插入到页面中。通过这种方式，可以随时呈现视图，并一次性将所有视图插入到DOM中，以便通过尽可能少的回流和重绘来获得高性能的UI呈现。 this.el是根据视图的tagName，className，id和attributes属性创建的（如果已指定）。如果没有，el是一个空div。

渲染嵌套模型车把？

1 个答案: