Updating model hasMany relationships in UI

Question

I've trying to modify the contents of a hasMany relationship view some UI elements. I have two basic models, container and item. Containers have multiple items and they can have varying numbers of items. For instance:

App.Container.FIXTURES = [
  {id:1,name:'Container 1',slots:[0,0]},
  {id:2,name:'Container 2',slots:[0,0,0,0]},
  {id:3,name:'Container 3',slots:[0,0,0]}
];

I'm using the id 0 as sort of an empty item. It shows that this container can have an item here, but it's currently empty. There are numerous different items that can go into each position.

In my app, I have a custom UI that I've created that allows a user to select a new item to fill each slot. The problem is that for some reason, it's not updating in the container model. No matter what I try, it's just updating in the view, but not on the actual model instance. I thought this would work because the properties would be automatically bound.

I've created a JSBin here displaying the problem. If you click the save button, a json object of the current state of the model will be printed to the console.

What can I do to update the actual model properties? Please keep in mind that the position matters. For instance, if I change the item in the middle position of three, only it should update; not pushed onto the end.

Thanks. Any ideas would be appreciated.

in Ember, you can not bind to elements of an array, you would need to implement something else. — fanta

Julian Leviston Julian Leviston · Accepted Answer · 2014-04-19T03:01:10

This is a modelling issue.

You have Container, each of which has many Item... except that what's actually happening is you're using the Item class as your options - this is your catalogue, if you will, and you want to put these items into "slots" which you haven't created a model for.

So, depending on what you want to do, you should probably model it like this (using better names - I chose mine for clarity of explanation):

Container hasMany Slots each of which is connected to its Item So: Container hasMany -> Slots <- belongsTo Item

That is, you have a non-reified "join", which you're sort of calling "slots" and attaching to Container at the moment.

I say depending on what you want to do because I'm not sure if you want to have the simple case I outlined above, which is "here are a bunch of possible items you can choose to put any number of copies of into your containers" or if you want the more complicated to develop case which is "here is a bunch of items which are finite... as you add each item to a container, it disappears from the list of possibilities". To do the latter is much more complicated, but of course it's possible... this is how inventory systems work.

I hope that's answered your question...

To put it another way, you need to build yourself a Slot model, related to each of your other models, and manage the join properly. If you bind the slots properly to each dropdown then Ember will take care of hooking up the data for you.

Let me know if you need further help on how to do this.

I've modified your JSBin to comprehensively show you what I mean. Hope that helps explain it:

http://emberjs.jsbin.com/tenoqimu/5/edit

Updating model hasMany relationships in UI

1 Answers