Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you're using Ember >= 1.11, then <a href="https://stackoverflow.com/a/14501021/65542">https://stackoverflow.com/a/14501021/65542</a> below is the correct answer.</p> <hr> <p>I would create a <code>NavigationView</code>, see <a href="http://jsfiddle.net/pangratz666/z8ssG/" rel="nofollow noreferrer">http://jsfiddle.net/pangratz666/z8ssG/</a>:</p> <p><strong>Handlebars</strong>:</p> <pre class="lang-html prettyprint-override"><code>&lt;script type="text/x-handlebars" data-template-name="navigation"&gt; &lt;ul class="nav nav-tabs"&gt; {{#view view.NavItemView item="home" }} &lt;a {{action gotoHome}} &gt;Home&lt;/a&gt; {{/view}} {{#view view.NavItemView item="profiles" }} &lt;a {{action gotoProfiles}} &gt;Profiles&lt;/a&gt; {{/view}} {{#view view.NavItemView item="messages" }} &lt;a {{action gotoMessages}} &gt;Messages&lt;/a&gt; {{/view}} &lt;/ul&gt; &lt;/script&gt; </code></pre> <p><strong>JavaScript</strong>:</p> <pre class="lang-js prettyprint-override"><code>App.NavigationView = Em.View.extend({ templateName: 'navigation', selectedBinding: 'controller.selected', NavItemView: Ember.View.extend({ tagName: 'li', classNameBindings: 'isActive:active'.w(), isActive: function() { return this.get('item') === this.get('parentView.selected'); }.property('item', 'parentView.selected').cacheable() }) }); </code></pre> <p>And inside your route's <code>connectOutlets</code> you have to set the current navigation item via <code>router.set('navigationController.selected', 'home');</code> ...</p> <hr> <p>Also take a look at the <a href="https://github.com/emberjs-addons/ember-bootstrap" rel="nofollow noreferrer">ember-bootstrap</a> repository, which wraps this and more features of Bootstrap inside Ember.js</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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