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でラップされます..これは望ましくありません!
問題が見つからないようで、無知です..何かアイデアはありますか?