StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Sooner or later want to change the naming of your states or whatever you have to go through the code AND the view as well, also adding a function to transitionTo every route seems not desirable. My approach is a bit more programmatic and modularized:</p> <pre><code># Parent View-Tamplate, holding the navbar DOM elements App.NavView = Ember.View.extend( controller: App.NavArrayController templateName: "ember-nav" ) # We push NavItems into this array App.NavArrayController = Ember.ArrayController.create( content: Ember.A([]) ) # NavItem has two settable properties and # an programmatic active state depending on the router App.NavItem = Ember.Object.extend( title: '' goto: null # <=this is the name of the state we want to go to! active: (-> if App.router.currentState.name == @.get "goto" true else false ).property('App.router.currentState.name').cacheable() ) # the actual NavElement which gets the class="active" if the # property "active" is true, plus a on-click binding to # make the Router transition to this state App.NavItemView = Ember.View.extend( tagName: "li" classNameBindings: ["active"] click: -> App.router.transitionTo(@get('goto')) false ) </code></pre> <p>nav-view.hbs (for twitter-bootstrap-style navs)</p> <pre><code><div class="nav-collapse collapse"> <ul class="nav"> {{#each App.NavArrayController}} {{#view App.NavItemView classBinding="active" gotoBinding="goto"}} <a href="#" {{bindAttr data-goto="goto"}}> {{title}}</a> {{/view}} {{/each}} </ul> </div> </code></pre> <p>This way, I can just create and mess around with my routes in the Router, and keep the Nav-Definitions side-by-side:</p> <pre><code># put this somewhere close to the Router App.NavArrayController.pushObjects( [ App.NavItem.create( title: 'Home' goto: 'home' ), App.NavItem.create( title: 'Chat' goto: 'chat' ), App.NavItem.create( title: 'Test' goto: 'test' ) ] ) </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload