Question

我有菜单：

<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”。如果clck“menu2”：请参阅“content2”和“menu2”获取css类“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"...}}

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

Answer 1

我对此问题的解决方法是使用Ember.Router更改您看到的内容，使用Ember.ArrayController来控制菜单本身：您需要应用程序模板，其中一个用于菜单，一个用于内容：

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

Te菜单模板：

<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。

emberjs菜单更改内容

1 个答案: