Ember.js binding models stored within an array

Question

What is the 'correct' way to bind from one model to another when the models are stored within an array? Typically I'd imagine that this would be a Controller's content array, but to keep the example simple:

MyApp.websites = [];
MyApp.websites.push(Ember.Object.create({
  name: "Stackoverflow"
}));

MyApp.websites.push(Ember.Object.create({
  name: "Serverfault"
}));

MyApp.favorite = Ember.Object.create({
  // how should this be bound to a specific element of MyApp.websites?
  nameBinding: ?????????
});

What do you mean by 'specific'? Specific meaning the first item in the array? — pangratz
– pangratz, Commented Dec 14, 2011 at 23:24
@pangratz - sure any item in the array would do. I'm primarily interested in whether this is supported by Ember and if so the best approach. — Josh Rickard
– Josh Rickard, Commented Dec 15, 2011 at 3:01

Wilker Lucio · Accepted Answer · 2011-12-15 20:37:07Z

You can use a property to bind that.

This way:

MyApp.websites = [];
MyApp.websites.push(Ember.Object.create({
  name: "Stackoverflow"
}));

MyApp.websites.push(Ember.Object.create({
  name: "Serverfault"
}));

MyApp.mainController = Ember.Object.create({
  currentWebsiteIndex: 0,
  currentWebsite: function() {
    return MyApp.websites[this.get("currentWebsiteIndex")];
  }.property("currentWebsiteIndex")
});

MyApp.favorite = Ember.Object.create({
  // how should this be bound to a specific element of MyApp.websites?
  nameBinding: "MyApp.mainController.currentWebsite.name"
});

This is just to demonstrate the idea, a better implementation would be:

MyApp.websites = Ember.ArrayProxy.create({
  content: [],
  currentWebsiteIndex: 0,
  currentWebsite: function() {
    return this.objectAt(this.get("currentWebsiteIndex"));
  }.property("currentWebsiteIndex")
});

MyApp.websites.pushObject(Ember.Object.create({
  name: "Stackoverflow"
}));

MyApp.websites.pushObject(Ember.Object.create({
  name: "Serverfault"
}));

MyApp.favorite = Ember.Object.create({
  // how should this be bound to a specific element of MyApp.websites?
  nameBinding: "MyApp.websites.currentWebsite.name"
});

ebryn · Accepted Answer · 2011-12-15 03:29:26Z

2

You probably wouldn't want to use an array to store model objects you're binding to unless you're using {{#each}} in your template.

If you wanted to expand your example a bit further, I could provide more design suggestions.

Also, you'll want to use the observer-aware pushObject() method on Arrays that you're observing/binding to.

answered Dec 15, 2011 at 3:29

ebryn

4,3971 gold badge25 silver badges21 bronze badges

Collectives™ on Stack Overflow

Ember.js binding models stored within an array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related