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”。If clck "menu2": see "content2" and "menu2" get css class "menu-active" 等

重要信息：“content2”也会在 emberjs 中生成数据。当然，当单击“menu1”和稍后的“menu2”时：效果 menu1 必须消失。

我很困惑如何核心地使用它。

对于菜单，我应该扩展类视图还是控制器？

我试过了：

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

没有“li”等会更好吗？我想更好的方法是当 emberjs 生成

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

所以我应该做类似的事情

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

我没有填写如何以正确的方式做到这一点。

4

1 回答 1

4

我对这个问题的解决方案是使用 Ember.Router 来更改您看到的内容，并使用 Ember.ArrayController 来控制菜单本身：您需要具有两个出口的应用程序模板，一个用于菜单，一个用于内容：

<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 回答