CODEWITHSUNDEEP
ember.js
Osthekake
Osthekake

Reputation: 315

Differing models inside ember #each

I'm working on an Ember.js application and have a table of devices, where I would like each listed device to open a modal dialog, when clicked, using that specific device as a model for the dialog. The official documentation is slightly vague on how to do this, so I've been doing some guessing. I tried to pass the id of each device as a parameter inside the template:

{{#each}}
    <button data-toggle="modal" data-target="#modal" {{action 'openViewModal' 'viewDeviceModal' id}} class="btn btn-default btn-xs">View details</button>
{{/each}}

{{id}} works as intended elsewhere in the template.

Now, inside the route, I put this:

actions: {
openModal: function(modalName, id) {
  this.controllerFor(modalName).set("model", this.store.find('device', id));
  return this.render(modalName, {
    into: "application",
    outlet: "deviceModal"
  });
},

This gives me the following error:

"The value that #each loops over must be an Array. You passed (generated devices controller)"

Presumably, there is some confusion with the model of the list of devices (#each) and the model of the modal dialog. The modal dialog does not have #eachinside it.

I also lack a means to find out if my variables actually are what they are supposed to be. console.log does not work. I have not yet read all the documentation on debugging ember, so I'm hoping there will be some pointers there. Meanwhile, any help on how to get my modal dialog models to work would be greatly appreciated.

Upvotes: 1

Views: 75

Answers (1)

GJK
GJK

Reputation: 37389

This is not a problem with your each loop, but with your model. You're setting the model for the controller as a single record when it looks like it expects an array of records. Change the first line of your action to this:

this.controllerFor(modalName).set("model", [this.store.find('device', id)]);

Also, as a tip, don't load the record from the store again when you already have it. Just pass the whole record in the action helper:

{{action 'openViewModal' 'viewDeviceModal' this}}

Then your action handler can look like this:

openModal: function(modalName, record) {
    this.controllerFor(modalName).set("model", [record]);

Upvotes: 1

Related Questions