Question

我有以下观点：

return  Marionette.ItemView.extend({

        el: '<section>',

        template: JST['app/scripts/templates/grid.ejs'],

这样称呼：

// a Layout
regions: {
        grid: '#grid',
        detail: '#detail'
    },

    onShow: function () {

        var detailModel = new DetailModel();

        var g = new GridView(detailModel);

        this.grid.show(g);
    }

问题是：如何摆脱周围的部分元素？我试图省略el属性，但这给了我以下奇怪的div：

<div productname>

关心罗杰

Answer 1

骨干需要周围的元素才能工作。它本质上是一个容器/占位符，供您查看其内容，无论其内容是否已呈现。

如果您确实坚持没有容器，那么我会考虑采取以下措施：

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#set-how-views-el-is-attached

Marionette.Region.prototype.open = function(view){
  this.$el.empty().append(view.$el.children());
}

我说'求助'，因为在我看来，这不是Backbone应该如何使用，可能有副作用。（我不太确定当该区域中的视图尝试重新渲染时会发生什么;它的el元素指向什么？）

Answer 2

为了扩展斯科特的答案，尝试强制删除那些令人难以置信的视图标签可能是一个非常糟糕的主意。

所有Backbone视图都包含在DOM元素中。鉴于这一事实，您有两个主要选择：

让Backbone将您的视图置于默认的div元素
使用el或tagName属性

如果“额外”标签正在创建问题（例如，您需要生成用于插件的特定HTML集），那么您就不能正确定义包装元素。有关该主题的更多信息，请查看我的博文：http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/

基于jsFiddle进行编辑：您的奇怪行为的原因是您将模型实例传递给initialize函数。然后将其解释为视图的属性并将其设置为HTML属性。

向视图提供模型实例的正确方法是：

new App.FooterView({
    model: new App.Model()
})

换句话说，您向视图提供了一个javascript对象，其中包含model属性。如果您想快速学习Marionette基础知识，请查看我的书的免费预览：http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf（您将在第15-21页找到如何使用模型实例化视图）

摆脱Backbone.Marionette中的周围元素

2 个答案: