CODEWITHSUNDEEP
ember.js
Olu
Olu

Reputation: 3546

How to reference clicked object in Ember.js

I'm sorry if this is a noob question, I'm new to Ember.js and trying to figure some things out. In Ember.js, say I have a list of objects in a array controller and rendering a view for each particular object, if a user clicks on a DOM element belonging to a specific object, how do I determine which object whose element was clicked?

Example

ul#mainChat
  {{#each chat in App.chatController}}
  {{#view App.MainChatView tagName="li"}}
  li | Example
  {{/view}}
  {{/each}}

If I have 5 objects in the chat controller array and 5 li are generated, of a user clicks on one, how do I determine which object that belongs to.

Thanks!

Upvotes: 4

Views: 1244

Answers (1)

Andre Malan
Andre Malan

Reputation: 2043

You have to include an action for that element and pass the action a context, which you can access through the action's event.context in the target.

For example.

{{#each item in items}}
  <li {{action viewItem item target="view"}}>{{name}}</li>
{{/each}}

Then in your view (or wherever you set the target of the action to, it depends on what you're doing) you would have:

viewItem: function(event) {
  var item;
  item = event.context;
  //do what you want with the item 
}

Upvotes: 5

Related Questions