CODEWITHSUNDEEP
javascriptember.jseachhandlebars.js
Lowlo
Lowlo

Reputation: 255

How to access an array position in a ember template?

I'm experiencing some frustration trying to do a simple thing in Ember.
I know that all the mess comes from spliting up logic from templates, but I think what I'm trying to achieve is not so expensive.
I have a model which returns me a list of items, those items have a related property and depending if the value of that property is repeated, the template should show something or not.
My returned data should look like this:

[{id :0,
  text:"Element 0",
  nested_property: {
    value:'Value 1'
  }
},{id :1,
  text:"Element 1",
  nested_property: {
    value:'Value 1'
  }
},{id :2,
  text:"Element 2",
  nested_property: {
    value:'Value 2'
  }
},{id :3,
  text:"Element 3",
  nested_property: {
    value:'Value 2'
  }
},{id :4,
  text:"Element 4",
  nested_property: {
    value:'Value 1'
  }
}]

what I want to produce is something like this:

<ul>
  <li>
    <span>Value 1</span>
    <span>Element 0</span>
  </li>
  <li>
    <span>Element 1</span>
  </li>
  <li>
    <span>Value 2</span>
    <span>Element 2</span>
  </li>
  <li>
    <span>Element 3</span>
  </li>
  <li>
    <span>Value 1</span>
    <span>Element 4</span>
  </li>
</ul>

My first thought was: "Well, I keep the value of the actual loop on a variable, and compare in the next loop. If it's different override the value."
As we cannot use "if" to compare two variables, I had to create a component to do that. So that part of the problem is solved.
What I'm facing now is how to keep track of the last loop value, cause my component needs it to compare with the actual value.
I cannot access to a certain element inside the loop using any of those options:

{{#each model as |element key|}}
    {{model.0.text}}
    {{model[0].text}}
    {{model[key-1].text}} <--- That would be awesome if works :D
{{/each}}

Any thoughts? maybe another way to approach the problem?

Upvotes: 2

Views: 2813

Answers (3)

Lowlo
Lowlo

Reputation: 255

Thanks a lot to @Bek for the answer cause it put me on the right track. I'm writting it down here just for the googlers.
Using the third option makes a part of the job and to use it inside an ember tag, it has to be done between parentheses:

{{ log (get model 1) }}

As what I needed is to access to a concatenation of a dynamic part and a fixed string to indicates object atributes, I had to use:

{{ log (get model (concat variable 'fixed.string')) }}

And at least, but not last... As I need to access the position just before the actual one, I should use a math operation in it. And there is no built in helper to get it so I found it here Math Ember Helper and the final code is looking something like this:

{{#each model as |item index|}}
  {{ log (get model (concat (math key '-' 1) 'nested_property.value')) }}
{{/each}}

Upvotes: 1

Bek
Bek

Reputation: 3207

if you want to iterate over array model then you do following:

  {{#each model as |item|}}
    {{index}}
    {{item.text}}
    {{item.nested_property.value}}
  {{/each}}

if you want to get last element of array model, you do to following: 

{{model.lastObject}}

if you want to get specific element of array model, you do to following: 

{{get model '2'}}

Everything is simple :) P.S. You need to be using latest ember for this

Upvotes: 2

justinaray
justinaray

Reputation: 128

My suggestion would be to do this in javascript where you have a full suite of tools at your disposal.

The Ember-way to do that would be to make a computed that would massage your data for presentation.

binData: Ember.computed('origData', function() {
    let origData = this.get('origData');
    // use Ember collection utilities, lodash, whatever here
    // to bin your data and make it an easy object to loop in hbs
}

Now you can use binData right inside your template. And, because of the magic of Ember, it will update whenever binData does!

Upvotes: 0

Related Questions