When i use {{each}} for example:
{{#each imagepost}}
<li>{{title}}</li>
{{else}}
empty :O
{{/each}}
I get the 'empty :O' message
When i do it like this:
{{#each imagepost in controller}}
<li>{{imagepost.title}}</li>
{{else}}
empty :O
{{/each}}
It works fine!
It is weird cause the docs says to do it like this:
{{#each people}}
<li>Hello, {{name}}!</li>
{{/each}}
Which doesnt work for me =/
Does the shortened version won't apply to models? only to controller's properties?
the shortened version only applies to properties on the controller/model or the controller/model. In your case it would be:
{{#each controller}}
<li>{{title}}</li>
{{else}}
empty :O
{{/each}}
or
{{#each model}}
<li>{{title}}</li>
{{else}}
empty :O
{{/each}}
Note, if you do {{#each model}} and you have an itemController defined on the array controller it won't wrap each item with the item controller, you would need to do this: {{#each model itemController='foo'}}.
Related
I have an each loop that looks something like this:
{{#each controller}}
{{#link-to 'searches.show' this}}
<span>{{name}}</span>
{{/link-to}}
{{/each}}
At the moment, the this in {{#link-to 'searches.show' this}} seems to refer to the content of the controller, rather than to the controller itself. Is there a way to pass in the controller here, rather than its model?
{{#each}}
{{#link-to 'searches.show' controller}}
<span>{{name}}</span>
{{/link-to}}
{{/each}}
This will work fine.
I have the following template where I loop over a list of objects and want to have a checkbox that is bound to a field isChecked for that object. This needs to be in a view helper in order to get the for tag to work (I think). When I do this I can't seem to figure out how to keep the binding with the isChecked field.
{{#each listEntry in listEntries}}
{{#view}}
{{view Ember.Checkbox viewName="checkboxView" checkedBinding="listEntry.isChecked"}}
<label {{bindAttr for="view.checkboxView.elementId"}}>Option 1</label>
{{/view}}
{{/each}}
Your question is similar to that, but that approach not work, I think is because the each helper.
But one of the comments say about nesting your component in the label.
I have done that and works.
{{#each listEntry in listEntries}}
<label>
{{view Ember.Checkbox viewName="checkboxView" checkedBinding="listEntry.isChecked"}}
Option 1
</label>
{{/each}}
I have created a jsfiddle showing
This is what I ended up doing. The problem I kept having was the need for the binding for the "for" attribute was not working in conjunction with the checked binding. Things were out of scope. If anyone has a better way to accomplish this, please let me know.
{{#each listEntry in ListEntries}}
{{#if ../isCheckable}}
{{#with ../listEntry}}
{{#view listEntryBinding="this"}}
{{view Ember.Checkbox viewName="checkboxView" checkedBinding="listEntry.isChecked"}}
<label {{bindAttr for="checkboxView.elementId"}}></label>
{{/view}}
{{/with}}
{{/if}}
{{/each}}
I'm having a scoping issue with Handlebars templates. I have a list of modules, each of which contains a list of services. So I have a template like this (with some markup removed):
{{#each controller}}
<a onclick='$(".{{unbound uuid}}").toggle(0);'>
{{#each service in services}}
<div class='{{unbound uuid}}'></div>
{{/each}}
{{/each}}
The problem is that the second {{unbound uuid}} doesn't get substituted. And if I try accessing any other item of the outer scope, the same thing happens. However, the Ember.js site says that using the each ... in helper should preserve outer scope. What am I doing wrong?
(FYI: Using latest version of Ember.js, Ember-data and Handlebars.)
Maybe this is the right syntax?
{{#each item in controller}}
<a onclick='$(".{{unbound item.uuid}}").toggle(0);'>
{{#each service in services}}
<div class='{{unbound item.uuid}}'></div>
{{/each}}
{{/each}}
I'm confused on how I'm supposed to iterate through arrays of objects and when to use the different possibilities.
So far I've come across:
{{#each user in controller}}
{{#each user in model}}
{{#each user in users}}
{{#each User}}
And I've even switched some of them up a bit just to see if I could break it; for example both
{{#each user in controller}}
and
{{#each user in model}}
output the same code successfully. I was hoping someone knew a simple explanation on when to use each one and what the differences between them are. Thanks!
The following uses of the {{#each}} helper are equivalent:
{{#each user in controller}}
{{#each controller}}
{{#each user in model}}
{{#each model}}
{{#each user in content}}
{{#each content}}
// and a couple of other possible combination, depending on your setup
And since this PR you can also use simply {{#each}}.
The main difference though is how you access the properties and the items itself you are looping over.
Example using user as the accessor:
{{#each user in model}}
{{user.name}}
{{/each}}
Example using this:
{{#each model}}
{{this.name}}
{{/each}}
Example accessing the item properties directly:
{{#each model}}
{{name}}
{{/each}}
Hope this makes things more clear.
I'm trying to analyse TodoMVC's Ember example. What does the second argument to the #each helper mean?
<ul id="todo-list">
{{#each filteredTodos itemController="todo"}}
<li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
{{#if isEditing}}
{{view Todos.EditTodoView todoBinding="this"}}
{{else}}
{{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}}
<label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
<button {{action "removeTodo"}} class="destroy"></button>
{{/if}}
</li>
{{/each}}
</ul>
It's supposed to be an option hash but I'm not sure.
It sets the itemController property of the current controller (TodosController I presume) to todo i.e the instance of the TodoController.
That means that every item (<li> element) will be binded not to the TodosController but to a TodoController instance.
isEditing looks for the property on the instance of TodoController and {{ action "removeTodo" }} will call removeTodo function on TodoController.