1

我被 el视图的属性困了几个小时。我正在使用 Marionette.js 但它的逻辑相同，我猜..

无论如何，我要做的是：创建一个布局视图并为其添加一个侧边栏：（一切都通过 require.js 请求）

                    var applicationLayout = new ApplicationLayout();

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

应用程序布局.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>

应用侧边栏视图：

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 中.. 我不想要！

我似乎找不到问题，而且我一无所知..有什么想法吗？

4

2 回答 2

0

Bakcbone 默认情况下会创建一个 Div 来呈现您的视图，因此如果您不希望创建该 div，请通过将 tagName 属性设置为您需要的 HTML 元素来更改视图中的默认设置。

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

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

此外，您指定的 el 是区域的 el，在您的布局内，这就是冲突。

于 2013-06-15T17:16:11.783 回答
0

我认为您应该在这里做的是使用带有区域的 loyout 并通过以下方式在区域内呈现您的项目视图region.show(myViewInstance);

于 2013-09-03T22:41:12.513 回答