Question

我使用视图的el属性停留了几个小时。我正在使用Marionette.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：我在检查器中看到了这一点 - ＆gt;布局正确呈现

<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

默认情况下，Bakcbone会在渲染视图时创建Div，因此如果您不想创建div，请在视图中更改此默认值，方法是将tagName属性设置为您需要的HTML元素。

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

            initialize : function()
            { ........

此外，您指定的区域是布局内的区域，即冲突。

Answer 2

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

在区域内渲染项目视图

backbone.js el存在但不显示内容

2 个答案: