0

メニューがあります：

<ul>
<li><a>menu1</a></li>
<li><a>menu2</a></li>
<li><a>menu3</a></li>
</ul>

私は内容を持っています：

<script type="text/x-handlebars" data-template-name="content1">text1</script>
<script type="text/x-handlebars" data-template-name="content2">text2</script>
<script type="text/x-handlebars" data-template-name="content3">text3</script>

そしてサイト：

...
header
menu
<div id="content">
<!-- there is a place for content from emberjs .appendTo() i guess should be used? -->
</div>
footer
...

ユーザーが「menu1」をクリックすると、「content1」と「menu1」が CSS クラス「menu-active」を取得します。「menu2」をクリックすると、「content2」と「menu2」がCSSクラス「menu-active」などを取得します。

重要な情報: 「content2」は emberjs でもデータを生成します。もちろん、「menu1」をクリックしてから「menu2」をクリックすると、効果 menu1 が消えます。

私はそれをコアレットで使用する方法を混乱させています。

メニューの場合、クラス View または Controller を拡張する必要がありますか?

私は試した：

<li>{{#view App.MenuView}}<a {{action "show" content="content1" }} >content1</a>{{/view}}</li>

「リ」等は無い方が良いでしょうか？より良い方法は、emberjsが生成するときだと思います

"<li><a>...</a></li>"

だから私は何かをする必要があります

{{... menu="menu1" content="content1"...}}

これを正しい方法で行う方法については説明しません。

4

1 に答える 1

4

この問題に対する私の解決策は、表示されるコンテンツを変更するために Ember.Router を使用し、メニュー自体を制御するために Ember.ArrayController を使用することです: メニュー用とコンテンツ用の 2 つのアウトレットを持つアプリケーション テンプレートが必要です。

<script type="text/x-handlebars" data-template-name="application">
<p>Click on menu item:</p>
{{outlet menu}}
{{outlet main}}
</script>

メニュー テンプレート:

<script type="text/x-handlebars" data-template-name="menu-list">
<ul class='nav nav-list'>
{{#each controller}}
{{#if isActive}}
<li class="active">
{{else}}
<li>
{{/if}}
<a {{action changeRoute this.url}}>{{this.name}}</a>
</li>
{{/each}}
</ul>
</script>

各コンテンツは、独自のビューによって制御されます。

App.IndexView = Ember.View.extend({
  templateName: 'index',
});

およびテンプレート:

<script type="text/x-handlebars" data-template-name="index">
<h1>Index Content</h1>
</script>

メニュー項目をクリックすると、メニューとスワップ コンテンツを変更する changeRoute メソッドが実行されます。

...
changeRoute: function(router,context) {
  router.transitionTo(context.context,context);
},
connectOutlets: function(router){
  var appContr = router.get('applicationController');
  var cname = router.get('currentState.name');
  appContr.connectOutlet('main',cname);
  appContr.connectOutlet('menu','menuList');
}
...

別の ThinRoute クラスを作成しました。

...
App.ThinRoute = Ember.Route.extend({
...

したがって、ルートの定義は非常に簡単です。

...
root: Ember.Route.extend({
index: App.ThinRoute.extend({
  route: '/',
}),
dir: App.ThinRoute.extend({
  route: '/dir',
})
})
...

例を見てください: jsfiddle。

于 2012-09-04T15:57:37.547 に答える