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')
Related
I have normal, basic ember-cli project.
This is my application.hbs:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
{{render 'sidebar'}}
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{{outlet}}
</div>
</div>
</div>
This is my post.hbs:
{{#each model as |post|}}
{{post.text}}
{{/each}}
This is my sidebar.hbs:
<ul class="nav nav-sidebar">
{{#each model.posts as |post|}}
<li>{{#link-to author}}{{post.author.name}}{{/link-to}}</li>
{{/each}}
</ul>
and everything else is standard.
How to make work {{render 'sidebar'}} with just the title of my categories?
Now it shows nothing.
Updated the answer above me.
// application.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
{{side-bar}}
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{{outlet}}
</div>
</div>
</div>
// templates/components/side-bar.hbs
<ul class="nav nav-sidebar">
{{#each posts as |post|}}
<li>{{#link-to author}}{{post.author.name}}{{/link-to}}</li>
{{/each}}
</ul>
// components/side-bar.js
// This triggers once the component is called out {{side-bar}}.
init: function() {
// You're extending ember component class here
// This class has its own init function if u dont call
// _super() it means that the component has not yet been
// Initialised and component's not working.
this._super();
// Use your queries or what ever u need here
// e.g query('posts', { user: 1 })
this.set('posts', this.get('store').find(x));
}
I'm not sure why the render helper was not deprecated in Ember 1.13 and removed in 2.0, but you really shouldn't use it any more. The render helper uses a view and a controller that is not at the top level. Views have been removed in 2.0, and controllers not at the top level are deprecated.
Make your sidebar a component.
// application.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
{{side-bar model=model}}
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{{outlet}}
</div>
</div>
</div>
// templates/components/side-bar.hbs
<ul class="nav nav-sidebar">
{{#each model.posts as |post|}}
<li>{{#link-to author}}{{post.author.name}}{{/link-to}}</li>
{{/each}}
</ul>
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>
For some reason, I can't call my helper in my template. It throws an error saying that my helper is undefined.
I've got the following code :
<script type="text/x-handlebars" id="catalog">
<div class="col-md-10">
<ul class="list-group">
{{#each catalog.catalog_categories}}
{{categoryHelper this}} // This works !!!
{{/each}}
</ul>
</div>
</script>
<script id="categories-template" data-template-name='test' type="text/x-handlebars-template">
<a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}">
<li class="list-group-item">
{{ category.category_name_fr_sh }} // French name of category
</li>
</a>
{{#if category.category_children}}
{{#each category.category_children}}
{{categoryHelper this}} // This throw error saying that the helper is undefined
{{/each}}
{{/if}}
</script>
//app.js
Ember.Handlebars.helper('categoryHelper', function(category) {
var template = Handlebars.compile($('script#categories-template').html());
return new Handlebars.SafeString(template({category: category}));
});
EDIT:
Here's a jsfiddle
http://jsfiddle.net/CycS8/
When ember bootstrap, it will look for all templates with the selector script[type="text/x-handlebars"], script[type="text/x-raw-handlebars"], and for each template it will compile with the appropriate compiler engine:
Ember.Handlebars.compile for scripts with type="text/x-handlebars and Handlebars.compile for type="text/x-raw-handlebars.
After the compilation the script tag is removed from the dom.
Probally the $('script#categories-template').html() in your helper is returning nothing. Because the template isn't in the dom.
I think that the following could work:
templates
<script type="text/x-handlebars" id="catalog">
<div class="col-md-10">
<ul class="list-group">
{{#each catalog.catalog_categories}}
{{categoryHelper this}}
{{/each}}
</ul>
</div>
</script>
<script id="categories-template" type="text/x-raw-handlebars">
<a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}">
<li class="list-group-item">
{{ category.category_name_fr_sh }} // French name of category
</li>
</a>
{{#each category.category_children}}
{{categoryHelper this}}
{{/each}}
</script>
app.js
Ember.Handlebars.helper('categoryHelper', function(category) {
var template = Ember.TEMPLATES['categories-template'];
return new Handlebars.SafeString(template({category: category}));
});
UPDATE
Ember provide the render view helper, I think that you can get this working using the following:
<script id="catalog" type="text/x-handlebars">
<div class="col-md-10">
<ul class="list-group">
{{#each catalog.catalog_categories}}
{{render "categories-template" this}}
{{/each}}
</ul>
</div>
</script>
<script id="categories-template" type="text/x-handlebars">
<a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}">
<li class="list-group-item">
{{ category.category_name_fr_sh }} // French name of category
</li>
</a>
{{#each category.category_children}}
{{render "categories-template" this}}
{{/each}}
</script>
Your type is wrong, it should be type="text/x-handlebars" in your test template.
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.