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.
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.
Would really welcome some help with my navbar. I'm trying to achieve what I consider the most obvious setup. Dropdown menus on larger screens and drilldowns on smaller ones. I have a pen here but there are bullet marks that should not be there, and the menu opens horizontally (I want it vertically) on larger screens.
<div class="title-bar" data-responsive-toggle="nav-menu" data-hidefor="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title player-controls">Brand
</div>
</div>
<div class="top-bar" id="nav-menu">
<div class="row">
<div class="top-bar-left show-for-medium">
Brand
</div>
<div class="top-bar-right">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
Item
<ul class="vertical submenu" data-submenu>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
</ul>
</li>
<li class="">Item</li>
<li class="">Item</li>
<li class="">Item</li>
<li class="">Item</li>
</ul>
</div>
</div>
</div>
Not entirely sure about the vertical menu issue as the pen works fine for me. Regarding the errant bullet points, you are missing some essential classes. For the site title, you're using an li without the surrounding ul element. Add a ul with a class of menu around the title to fix that problem:
<ul class="menu">
<li class="menu-text">Site Title</li>
</ul>
The same menu class is missing for the sub menu:
<ul class="vertical submenu menu" data-submenu>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
</ul>
Here's an updated Pen
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/
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>
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>