Backbone.js el存在，但不显示内容

Question

我被一个视图的el属性卡住了几个小时。我使用的是木偶。js，但它是相同的逻辑，我猜…

无论如何，我所做的是:创建一个布局视图，并添加一个侧边栏(一切都是通过require.js请求的)

                    var applicationLayout = new ApplicationLayout();
                this.regions.main.show(applicationLayout);
                applicationLayout.sidebar.show(new ApplicationSidebarView({appId:id}));

ApplicationLayout.js

define
(
    ['marionette', 'tpl!templates/dashboard/application/ApplicationLayout.tpl'],
    function (Marionette, tpl)
    {
        "use strict";
        return Marionette.Layout.extend
        (
            {
                template: tpl,
                className: 'row',
                regions: 
                {
                    sidebar: '#application-nav',
                    detail: '#application-detail'
                }
            }
        );
    }
);

ApplicationLayout。TPL:我在检查器中看到->布局呈现正确

<div class="span2">
    <nav id="application-nav">
    </nav>
</div>

ApplicationSidebarView:

define
(
    ['marionette', 'jquery', 'tpl!templates/dashboard/application/ApplicationSidebar.tpl'],
    function (Marionette, $, tpl)
    {
        "use strict";
        return Marionette.ItemView.extend
        (
            {
                template: tpl,
                //el : "#application-nav", // commented out works fine
                initialize : function()
                {
                    this.appId = this.options.appId;
                    console.log('init');
                },
                render : function()
                {
                    console.log(this.$el); // returns the $ object
                    var html = tpl({'appId': this.appId});
                    console.log(html);  // returns the compiled template correct
                    console.log($('#application-detail').length) // 1
                    $('#application-detail').html(html); // doesn't work, WHY?
                    this.$el.html(html); // does work but it wraps it around a div
                    this.onDomRefresh();
                    return this;
                }
            }
        );
    }
);

要呈现的

模板:

<ul class="nav nav-tabs nav-stacked main-menu">
    <li><a href="/application/<%= appId %>/settings"><i class="icon-home"></i> Settings</a></li>
</ul>

现在我不明白的是为什么当我在el之前删除注释时它不工作，然后它不显示任何东西…

即使我用$('#application-detail').html(html);尝试它也没有显示任何东西。然而，$('#application-detail')返回正确的对象…那么这是怎么回事呢?

我也尝试在视图中传递{el: "#application-nav"}，但这也不起作用。

什么也没显示。然而，当我没有指定el元素，它工作得很好，但它包装在一个div..我可不想这样!

我似乎找不到问题所在，我一点头绪也没有。什么好主意吗?

Answer 1

backbone在默认情况下创建一个div来呈现视图，所以如果你不想创建这个div，可以通过将tagName属性设置为你需要的HTML元素来改变视图中的这个默认值。

return Marionette.ItemView.extend
    (
        {
            template: tpl,
            tagName 'nav',
            className : 'yourCSSClass',
            initialize : function()
            { ........

您指定的el是该区域的el，在您的布局中，这是冲突

Answer 2

我认为你应该在这里做的是使用区域布局，并通过region.show(myViewInstance);