emberjs menu change content

Question

I have menu:

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

I have contents:

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

And site:

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

If user click "menu1": see "content1" and "menu1" get css class "menu-active". If clck "menu2": see "content2" and "menu2" get css class "menu-active" etc.

Important information: "content2" will generate data in emberjs too. Ofcourse when click "menu1" and later "menu2": effects menu1 have to disappear.

I am confuse how to coretly use that.

For menu should i extend class View or Controller?

I tried:

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

Better will be without "li" etc.? I guess better way is when emberjs generate

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

so i should do something like

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

I dont fill how to do this in right way.

Please have a look at: http://stackoverflow.com/questions/11318572/right-way-to-do-navigation-with-ember/11319609#11319609 I think you will succeed by adapting this example to your use case. — sly7_7, Jul 23 '12 at 23:21
This example not work for me with the newest emberjs 0.9.8.1. When i change "http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js" to "js/ember-0.9.8.1.min.js" i have error "Uncaught TypeError: Cannot call method 'extend' of undefined" because of "Em.Controller.extend();" — kabra, Jul 24 '12 at 10:51
`Ember.Controller` is not available in this version. It has been introduced after version `0.9.8.1` ... — pangratz, Jul 24 '12 at 11:38
I'd say the simplest way is to switch to master and then follow this neat example http://stackoverflow.com/questions/11628489/emberjs-how-to-mark-active-menu-item-using-router-infrastructure — sly7_7, Jul 24 '12 at 12:01
@pangratz after 0.9.8.1.... so where can i download newest version? In http://emberjs.com/ i see 0.9.8.1. Even in http://docs.emberjs.com/ i dont see "Controller". — kabra, Jul 24 '12 at 12:17
@user1512576 You can download it from here https://github.com/emberjs/ember.js/downloads. `ember-latest.js` is the latest development version, so the docs have not yet been updated. They will as soon as the next version has been released. — pangratz, Jul 24 '12 at 12:37
@pangratz so where is the knowledge about Controller class now? — kabra, Jul 24 '12 at 12:59
What controllerBinding="controller.controllers.navbarController" exatly do? I dont know how this path was created? — kabra, Jul 24 '12 at 13:54
I removed all "App.NavbarController = Em.Controller.extend();" etc. abd controllerBinding="controller.controllers.navbarController" from script and this still work. So what sense of this? — kabra, Jul 24 '12 at 18:28

score 4 · Answer 1 · answered Sep 04 '12 at 15:57

My resolution for this problem is to use Ember.Router for changing content you see and Ember.ArrayController for controlling the menu itself: You need aplication template with two outlets one for menu and one for content:

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

Te menu template:

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

Each content is controlled by own view:

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

and template:

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

When you clicked menu item you run changeRoute method which changes menu and swap content:

...
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');
}
...

I created seperate ThinRoute class:

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

so definitions of routes are really simple:

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

Please have a look at example: jsfiddle.

emberjs menu change content

1 Answers1