1

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 : インスペクタにこれが表示されます -> レイアウトが正しくレンダリングされます

<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でラップされます..これは望ましくありません!

問題が見つからないようで、無知です..何かアイデアはありますか?

4

2 に答える 2