Ember.js binding models stored within an array

问题

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: ?????????
});

回答1:

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"
});

回答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.

来源：https://stackoverflow.com/questions/8512568/ember-js-binding-models-stored-within-an-array

标签

javascript

ember.js