Ok so I have a pretty simple array of objects that I retrieved with emberjs, now all I need it to do is have something along the lines of
{{#each array}}
{{value}}
{{/each}}
and have it so that the array is looped by each item, and each item then is looped by each value and I display all the values of that object, I am not sure how to get it to work.
I have used this helper here https://gist.github.com/strathmeyer/1371586 but it's no use, I have no idea where to start, it just seems like such a simple thing I don't understand why handlebars/ember doesn't support it, also does #key work at all with ember?
Thanks
Ember Handlebars doesn't support looping over objects.
To loop in an array you simply use
{{#each item in collection}}
{{item}}
{{/each}}
or
{{#each collection}}
{{this}}
{{/each}}
Related
Trying to use the index value in a loop in EmberJs
Consider the following scenario,
{{#each array1 as |element index|}}
<Component1 #prop={{element}} #prop2={{#array2[index]}} />
{{/each}}
I wish to send the object from the second array using the index value from first array. I cannot find any references to this. Any References i found use the first array alone and and didn't use the index in another variable.
Thanks in advance for your time and effort.
You can use get helper.
{{#each array1 as |element index|}}
<Component1 #prop={{element}} #prop2={{get #array2 index}} />
{{/each}}
I am trying to show a piece of markup under the very last item in an each in ember -- I tried something like #last - but it came back with an error
<ul>
{{#each people as |person index|}}
<li>Hello, {{person.name}}! You're number {{index}} in line</li>
{{/each}}
</ul>
Ember's {{each}} template helper does not provide an easy way to do so.
As you might figured out, you could use {{unless index}} to conditionally render stuff on the first object. This is working since index starts at zero and 0 is considered to be falsely.
You could combine ember-truth-helpers and ember-math-helpers to achieve something comparable for last element. Both are well maintained ember addons that provide a full set of template helpers.
Ember-truth-helpers provides a eq helper that adds support for equal comparison in templates. Ember-math-helpers provides a sub helper to subtract a value from another in a template. Combining both of them we could build a condition that will be true only for the last element:
{{#each items as |item index|}}
<li>
{{item}}
{{#unless index}}(first){{/unless}}
{{#if (eq index (sub items.length 1))}}(last){{/if}}
</li>
{{/each}}
You find an ember twiddle demonstrating the approach here: https://ember-twiddle.com/6ea05a2e9c884bd772eefabc91173d08?openFiles=templates.application.hbs%2C
It's even simpler if the array is an Ember.NativeArray. NativeArray of ember provides a lastObject property, which points to the last item in the array. You could use that one for equal comparison directly as pointed out by #Gaurav in a comment: {{#if (eq item items.lastObject)}}(last){{/if}} But be aware that this may give wrong results if the array has duplicated elements.
I have a source code(discourse) than I need to work with with ember.js. I am trying handle only one "post" (the first) in a list using cloaked-collection.
//topics.hbs
{{#unless model.postStream.loadingFilter}}
{{cloaked-collection itemViewClass="post"
defaultHeight="200"
content=postsToRender
slackRatio="15"
loadingHTML=""
preservesContext="true"
uncloakDefault="true"
offsetFixedTop="header"
offsetFixedBottom="#reply-control"}}
{{/unless}}
//post.hbs
//some code here.
//Then I want to insert <div class="uniw"></div> only on the first post
The question is: for the list of itemViewClass="post", how can I check if I am in the first "post"? so that i can insert a piece if code.
You should be able to use firstObject to get first object of a collection. Something like this:
{{items.firstObject}}
Inside each block you can check index:
{{#each people as |person index|}}
{{#if (is-equal index 0)}}
{{person}}
{{/if}}
{{/each}}
Note that is-equal is non-standard helper. You can get it from ember-truth-helpers addon or write it yourself
I got a deprecation warning on {{#each}} saying I should switch to {{#each items in items}} but I can't make it work.
http://jsbin.com/qeqeyazoci/2/edit?html,js,output
http://guides.emberjs.com/v1.10.0/templates/displaying-a-list-of-items/
You need to look iterate through content instead of items
{{#each item in content}}
The handlebars each helper is used to iterate over a list of items in a backing ArrayController.
We can use the following construct to do something with a list of items AND show alternative details when that list is empty:
{{#each item in controller}}
<!-- stuff goes here -->
{{else}}
<!-- other stuff goes here -->
{{/each}}
This is great, but what if we want to differentiate between empty and not loaded? I feel like this must be a fairly common use case, but I can't figure out how to approach it - I don't see anything in the guides. Any help?
For this use case, i just wrap the "each" with a "if", that test an additional argument 'loaded' on the model.
{{#if content.loaded}}
{{#each item in controller}}
<!-- stuff goes here -->
{{else}}
<!-- other stuff goes here -->
{{/each}}
{{/if}}
The 'loaded' is toggled to true when the ajax promise (or whatever you do) completes.
Hope it helps!
For me with Ember 1.8.1, Ember Data 1.0.0-beta11 and iterating over hasMany collection on a model loaded wasn't working, as well as isLoaded. The thing that worked was isFulfilled.