How to access an array object inside handlebars in Ember.js, when the index is dynamic?

Question

I am trying to access an object within an array inside handlebars, on Ember.js. I've tried the following combinations:

1 {{render "input-validation-message" validity.options.[_view.contentIndex]}}

2 {{render "input-validation-message" validity.options._view.contentIndex}}

3 {{render "input-validation-message" validity.options[_view.contentIndex]}}

The array is validity.options and the index is _view.contentIndex, which is the only way I know how to access the index within {{#each}} loops on Ember.js.

None of the three methods are passing the object through. Does anyone have a solution?

EDIT:

After some playing around, I found out that the _view.contentIndex is not being accessed inside of an {{unless}} or {{if}} block. My code looks a little like this:

{{#each modelArray}}
       {{#unless _view.contentIndex}}
        [code here that needs to access _view.contentIndex]
       {{else}}
        [more code here that needs to access _view.contentIndex]
       {{/unless}}
{{/each}}

Is there a way to get pass this issue?

FIXED!

I modified the correct answer below slightly:

{{#each item in modelArray itemController='foo'}}
   {{render "input-validation-message" item.validityOption}}
{{/each}}

App.FooController = Ember.ObjectController.extend({
  validityOption: function(){
    var model = this.get('model'),
        eachController = this.get('target'),
        parentController = eachController.get('target'),
        idx = eachController.get('content').indexOf(model);
    return parentController.get('validity.options').objectAt(idx);
  }.property('model')
});

If the array is not an Ember.Array, use [] not objectAt().

are you eaching over one array and trying to grab options from a different array? — Kingpin2k
– Kingpin2k, Commented Jun 18, 2014 at 22:31
@kingpin2k Yeah the eaching array is a DS.Model, whereas the validity.options array is a simple array. I've found a more specific reason for the error, please check the edit. — Omair Vaiyani
– Omair Vaiyani, Commented Jun 18, 2014 at 23:04

Kingpin2k · Accepted Answer · 2014-06-19 00:41:19Z

1

You'll want to use an itemController and hook up the association in the controller

{{#each item in modelArray itemController='foo'}}
   {{render "input-validation-message" item.validityOption}}
{{/each}}

App.FooController = Ember.ObjectController.extend({
  validityOption: function(){
    var model = this.get('model'),
        parentController = this.parentController,
        idx = parentController.indexOf(model);
    return parentController.get('validity.options').objectAt(idx);
  }.property('model')
});

Example: http://emberjs.jsbin.com/ruzusiya/1/edit

answered Jun 19, 2014 at 0:41

Kingpin2k

47.4k10 gold badges80 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Omair Vaiyani Over a year ago

Excellent! Did not know about the itemController property. I had to modify it slightly, please check the edit.

Collectives™ on Stack Overflow

How to access an array object inside handlebars in Ember.js, when the index is dynamic?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related