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.
Related
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 have this issue trying to use an ember partial and an action that targets the view
...
<li class="buttonsList-item-horizontal btn btn-lg btn-secondary" {{action restore this target='view'}}>
<i class="fa fa-refresh"></i>
<span class="btn-text">Restore</span>
</li>
...
If I use this code inside a partial is not working if I use it directly in the template it works.
Any ideas or suggestions to accomplish the same result?
the template is
...
<ul class="list">
<li class="list-item list-item-separator">{{group.key}}</li>
{{#each content}}
{{partial 'templateElement'}}
{{/each}}
</ul>
...
Assuming you are talking about the view, and not the template which you called the view above you have the logic correct.
App.IndexView = Em.View.extend({
actions:{
blah:function(){
console.log('asdf');
}
}
});
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{partial 'foo'}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="foo">
<button {{action 'blah' target='view'}}>{{item}}</button>
</script>
http://emberjs.jsbin.com/hocanilu/1/edit
I have the following code for generating links to objects and I have a template that renders it but I would like to have each item in the list call either a different template or display different items. Is this possible?
<div class="main-content container">
<div class="container-fluid">
<div class="col-xs-3">
<div class="span3">
<table class='table'>
<thead>
<tr><th><h3>Select Your Source</h3></th></tr>
{{#each refRecord in model}}
<tr><td>
{{#link-to 'ref' refRecord classNames="fullwidth"}}{{refRecord.type}}{{/link-to}}
</td></tr>
{{/each}}
</table>
</div>
</div>
<div class="col-xs-9">
{{outlet}}
</div>
</div>
</div>
I'm not sure if I've understood correctly, but I took your question in two ways, either they link to a different template, or they render each item different in the list.
Link to different templates
You can create dynamic link-to using a property instead of a string in the link-to statement.
<ul>
{{#each item in model}}
<li>{{#link-to item.template item}}{{item.color}}{{/link-to}}</li>
{{/each}}
</ul>
http://emberjs.jsbin.com/xarixiyu/1/edit
Render each item different
This is a bit different since render doesn't allow taking a property and resolving the name dynamically. But you can still use an if statement and render different items differently.
{{#each item in model}}
<li>
{{#if item.foo}}
{{render 'foo' item}}
{{/if}}
{{#if item.bar}}
{{render 'bar' item}}
{{/if}}
</li>
{{/each}}
http://emberjs.jsbin.com/xarixiyu/2/edit
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.