Ember binding to array element

Question

I'm trying to set up an ember binding between a controller and a model. The controller is part of an array (see question Ember.js views (unlimited number)), and so I'm trying to set up the binding to an element in a the model (an ArrayProxy) with the same index as the index of the controller itself.

The binding works if I link it to a non-indexed element of the ArrayProxy, but not if I try set an element of the array. So, if I set up the binding like:

answerBinding: 'App.SurveyData.test'

and in App.SurveyData set 'test' to be a string, say "StackOverlow", the two way binding is set up correctly. If I set up a binding like

answerBinding: 'App.SurveyData.content'

where content is an array, I can view in the console that 'answer' has a value of 'Array[2]' and each element equals 'Test object' as expected

When I try to set up the answerBinding as

answerBinding: 'App.SurveyData.content[0]'

which is trying to link answer to the first element in SurveyData as required, I can view in the console that 'answer' has a value of undefined.

Code is at http://jsfiddle.net/reubenposthuma/dyLGG/1/

Any thoughts would be appreciated

Mars · Accepted Answer · 2012-12-10 03:05:30Z

2

Ember's bindings only work for properties. Specific indexes of Array cannot be bound, unless you do so via a computed property, like:

answerBinding: 'App.SurveyData.firstItem'

...and in App.SurveyData defined the computed property:

firstItem: function() { return this.objectAt(0); }.property('content')

Think about it this way: the array index is an argument to the [] function (not literally, but for the sake of this explanation.) Bindings cannot except arguments; they are purely a static path to a property to bind.

answered Dec 10, 2012 at 3:05

Mars

1,52810 silver badges15 bronze badges

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

1 Comment

Ryan Over a year ago

Remember that Ember arrays already come with firstObject and lastObject.

Reuben Posthuma · Accepted Answer · 2012-12-10 17:10:39Z

0

As Mars said, bindings cannot accept indices of arrays, so I created a workaround. It is one way, although it could be modified to have an observer on the array itself for two way bindings. For my purposes (taking data from a survey and putting it in a answer array) one way bindings work perfectly.

answerObserver: function() {
  App.SurveyData.content[this.id-1] = this.answer;
}.observes('answer'),

whenever the data (in this case a textbox) changes, the changes will be copied into the index of the array.

answered Dec 10, 2012 at 17:10

Reuben Posthuma

1598 bronze badges

Collectives™ on Stack Overflow

Ember binding to array element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related