I'm using .nav-pills to create a ui element to select the route in my app like this:
<ul class="nav nav-pills">
{{#each item in model}}
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
{{item.name}}<b class="caret"></b>
</a>
<ul class="dropdown-menu">
{{#each child in item.children}}
<li>{{#link-to 'child' item child}}{{child.name}}{{/link-to}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
It works great, but I can't figure out awhile to get the li.dropdown to have .active. I've tried using link-to helper and setting it to the parent route, but that doesn't seem to work.
Any ideas how to get this to work?
Just after posting this, it dawned on me that I had used the item.index route for the link-to that I was using for li.dropdown. I changed it to just item and it works perfectly now.
To summarize:
<ul class="nav nav-pills">
{{#each item in model}}
{{#link-to 'item' item tagName='li' classNames="dropdown"}}
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
{{item.name}}<b class="caret"></b>
</a>
<ul class="dropdown-menu">
{{#each child in item.children}}
<li>{{#link-to 'child' item child}}{{child.name}}{{/link-to}}</li>
{{/each}}
</ul>
{{#link-to}}
{{/each}}
</ul>
Related
Why while this code does render,
{{#if ordered}}
<ol>
{{#each things as |thing|}}
<li {{action "showThing" thing}}>{{thing}}</li>
{{/each}}
</ol>
{{else}}
<ul>
{{#each things as |thing|}}
<li {{action "showThing" thing}}>{{thing}}</li>
{{/each}}
</ul>
{{/if}}
this does not?
{{{if ordered "<ol>" "<ul>"}}}
{{#each things as |thing|}}
<li {{action "showThing" thing}}>{{thing}}</li>
{{/each}}
{{{if ordered "</ol>" "</ul>"}}}
The last snippet emits <ol></ol> before the list and no closing tag after the list:
<div id="ember260" class="ember-view"><h2>Ordered List Of Things</h2>
<ol></ol>
<li data-ember-action="" data-ember-action-261="261">yarn</li>
<li data-ember-action="" data-ember-action-262="262">feathers</li>
<li data-ember-action="" data-ember-action-263="263">dinner plate</li>
<li data-ember-action="" data-ember-action-264="264">sheep</li>
</div>
and why does this code not even compile?
{{#if ordered}}
<ol>
{{else}}
<ul>
{{/if}}
{{#each things as |thing|}}
<li {{action "showThing" thing}}>{{thing}}</li>
{{/each}}
{{#if ordered}}
</ol>
{{else}}
</ul>
{{/if}}
Error:
Unclosed element ol (on line 2).
I am writing the code what PatsyIssa mentioned in his comments,
Create component named ordered-list.
{{ordered-list tagName=(if (eq ordered 'ol' 'ul')) things=things showThings=(action 'showThings')}}
In ordered-list.hbs,
{{#each things as |thing|}}
<li {{action showThing thing}}>{{thing}}</li>
{{/each}}
For the eq helper you need to install ember-truth-helpers addon or create your own helper that simply compares values.
I have a top bar that contains a dropdown menu with links for the current user's account (e.g. Dashboard, Sign out, etc). Each menu item wraps a link that points to a relative URL.
Opening the menu works fine, but as soon as I click on an item, the menu closes and nothing happens.
I've looked for click and mousedown event handlers, but can't find anything that looks like it would be causing this.
Anyone have ideas about this?
Here's the relevant HTML code:
<div class="contain-to-grid nav-wrapper">
<nav data-topbar="data-topbar" role="navigation" class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Site name</h1>
</li>
</ul>
<section data-hook="user-info" class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
username
<ul class="dropdown">
<li>Dashboard</li>
<li>Sign out</li>
</ul>
</li>
</ul>
</section>
<section class="top-bar-section">
<ul class="right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</nav>
</div>
And its fiddle: https://jsfiddle.net/a3qrhg5a/
You just probably forgot to include jQuery and initialize Foundation JS
For example:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script>
$(document).foundation();
</script>
And here is your fiddle. Fixed:
https://jsfiddle.net/bartholomej/nxgjqtw4/5/
This works fine:
<div class='collapse navbar-collapse' id='main-nav-collapse'>
<ul class='nav navbar-nav'>
{{#link-to 'index' tagName='li' activeClass='active'}}
{{#link-to 'index'}}Home{{/link-to}}
{{/link-to}}
</ul>
</div>
But when I add in another tab below, and restart the server nothing shows at all..
<div class='collapse navbar-collapse' id='main-nav-collapse'>
<ul class='nav navbar-nav'>
{{#link-to 'index' tagName='li' activeClass='active'}}
{{#link-to 'index'}}Home{{/link-to}}
{{/link-to}}
{{#link-to 'orders' tagName='li' activeClass='active'}}
{{#link-to 'orders'}}Orders{{/link-to}}
{{/link-to}}
</ul>
</div>
Orders is "orders.hbs" and is just a static html page.. and in my routers.js.coffee file is the following route:
Dashboard.Router.map ()->
#resource('orders')
I am using tagName in my Ember template and a menu separator || but rendering is not quite what is expected. e.g Mouse pointer doesn't turn to Hand when pointing About or Home and || appears at the end of About. Where as Products appear alright. What is wrong?
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default fixed-top'>
<div class='container'>
{{#link-to 'index' class='navbar-brand'}}Ember{{/link-to}}
<ul class='nav navbar-nav navbar-right'>
{{#link-to 'index' tagName='li'}}Home{{/link-to}}
||
{{#link-to 'about' tagName='li'}}About{{/link-to}}
<li>{{#link-to 'products'}}Products{{/link-to}}</li>
</ul>
</div>
</div>
<div class='container'>
{{outlet}}
</div>
</script>
You didn't wrap your menu items in <li>:
<ul class='nav navbar-nav navbar-right'>
<li>{{#link-to 'index' tagName='li'}}Home{{/link-to}}</li>
<li>||</li>
<li>{{#link-to 'about' tagName='li'}}About{{/link-to}}</li>
<li>{{#link-to 'products'}}Products{{/link-to}}</li>
</ul>
I have a template to render a view for a user which has a tab bar to show followers,and others.
<h3>{{name}}</h3>
<img {{bindAttr src="avatar"}} alt=""/>
<ul class="nav nav-tabs">
<li class="active">{{#linkTo 'user.followers' this}}Followers{{/linkTo}}</li>
<li class="active">{{#linkTo 'user.following' this}}Following{{/linkTo}}</li>
<li class="active">{{#linkTo 'user.messages' this}}Messages{{/linkTo}}</li>
</ul>
{{outlet}}
Everything works fine when the template is rendered the first time. When I switch from one user to one of its followers the name and image is changing but the links in the tab bar are not updated.
You could try this:
<h3>{{name}}</h3>
<img {{bindAttr src="avatar"}} alt=""/>
{{#with this}}
<ul class="nav nav-tabs">
<li class="active">{{#linkTo 'user.followers' this}}Followers{{/linkTo}}</li>
<li class="active">{{#linkTo 'user.following' this}}Following{{/linkTo}}</li>
<li class="active">{{#linkTo 'user.messages' this}}Messages{{/linkTo}}</li>
</ul>
{{/with}}
{{outlet}}
The {{#with}} helper should make the inner code bound. I found this proposed solution in this github issue.