WebAPI に対して実行される Ember アプリケーションとして Web アプリケーションの UI を完全に書き直す目的で、現時点では Ember.JS で小さなプロトタイプを実行しようとしていますが、Ember を実行することはできましたが、 OK、jqueryui でタブを正しく初期化できません。
ビュー内でタブを作成するための静的データを配置するとうまくいくようですが、動的データを使用している場合はうまくいきません。
Ember ビュー テンプレートがあります
<script type="text/x-handlebars" id="index">
<div id="tabs" class="ui-tabs">
<ul>
{{#each model}}
<li>
<span class="ui-icon ui-icon-person"></span>
<a {{bindAttr href="route"}} {{bindAttr title="tabTitle"}}><span>{{title}}</span></a>
</li>
{{/each}}
</ul>
{{#each model}}
<div {{bindAttr id="tabTitle"}}>
<p>
Retrieving Data - {{title}}
</p>
</div>
{{/each}}
</div>
</script>
とビュー
App.IndexView = Ember.View.extend({
templateName: 'index',
didInsertElement: function () {
var tabs = $("#tabs").tabs();
}
});
そしてモデル
App.Section = DS.Model.extend({
name: DS.attr('string'),
title: DS.attr('string'),
tabTitle: function () {
return 'tab-' + this.get('name');
}.property("name"),
route: function () {
return '#' + this.get('tabTitle');
}.property("tabTitle")
});
App.Section.FIXTURES = [
{
id: 1,
name: 'home',
title: 'Home'
},
{
id: 2,
name: 'users',
title: 'Users'
}
];
(Firebug のチェックから) HTML を正しく生成しているように見えますが、これは機能しません。
<script type="text/x-handlebars" id="index">
<div id="tabs" class="ui-tabs">
<ul>
<li>
<span class="ui-icon ui-icon-person"></span>
<a href="#tab-home" title="tab-home"><span>Home</span></a>
</li>
<li>
<span class="ui-icon ui-icon-person"></span>
<a href="#tab-users" title="tab-users"><span>Users</span></a>
</li>
</ul>
<div id="tab-home">
<p>
Retrieving Data - Home
</p>
</div>
<div id="tab-users">
<p>
Retrieving Data - Users
</p>
</div>
</div>
</script>
それは完全に機能します。
タブが初期化されるまでにDOMが完全にレンダリングされていないことに関係していると思いますが、見つけることができるすべてのことは、didInsertElementがそれを行う場所であり、さらに深く掘り下げる時間がありました。
どんなアイデアにも感謝します。
編集：次のことを行うことで、これをうまく機能させることができました：
App.IndexView = Ember.View.extend({
templateName: 'index',
didInsertElement: function () {
Ember.run.next(this, function () {
if (this.$('#tab-users').length > 0) {
var tabs = $('#tabs').tabs();
} else {
Ember.run.next(this.didInsertElement);
}
});
},
});
これに関する問題は、1) ビューに書き込まれる最後の要素の 1 つが呼び出されることを知る必要があることです (動的データでは、必ずしもそれを知る必要はありません)。 2) このテクニックの非効率性に叫びたくなる!
さらに、物事がレンダリングされた後、JQueryUI でそれらを正しくスタイル設定する前に、古き良き FoUC (スタイルのないコンテンツのフラッシュ) を取得します。
どんな提案もありがたく受け取った。