Emberjs display array of item

Question

I'm trying to do something pretty simple, but I don't know how to do it..

I have created a fiddle to show where I am stuck : http://jsfiddle.net/NQKvy/982/

I have an array of item :

[
          {title: 'Kris', key: '0', description: 'This is the Kris'},
          {title: 'Luke', key: '1', description: 'This is the Luke'},
          {title: 'Alex', key: '2', description: 'This is the Alex'}
];

With this template :

<script type="text/x-handlebars" data-template-name="application">
    {{#each item in model}}
        <a href="#" {{action 'selectionItem' item.key}}>
            {{item.title}}
    </a><br/>
    {{/each}}

    <div> 
    <!-- Display the description here -->
    </div>
</script>

Inside the div I would like to display just one description. When the page load I would like to display the first item.description from the list, but when the user click on any item I would like to display the description related.

e.g : The default description here would be : "This is the Kris", if I click on Alex, it will display "This is the Alex" etc..

It is a very simple thing to do, but I'm stuck..

Kingpin2k · Accepted Answer · 2014-05-17 03:17:02Z

4

I have a working solution here:

http://jsfiddle.net/A5qJ5/

Basically, you're setting up a property selectedItem, which is updated when you call the action selectItem.

App = Ember.Application.create({});

App.ApplicationRoute = Ember.Route.extend({
  model: function(){
      return [
          {title: 'Kris', key: '0', description: 'This is the Kris'},
          {title: 'Luke', key: '1', description: 'This is the Luke'},
          {title: 'Alex', key: '2', description: 'This is the Alex'}
      ];
  },
  setupController: function(controller,model){
    this._super(controller, model);
    controller.set('selectedItem', model.get('firstObject'));
  }
});

App.ApplicationController = Ember.ArrayController.extend({
    selectedItem: undefined,
    actions: {
        selectItem: function( item ) {
            this.set('selectedItem', item);
        }
    }
})

template

{{#each item in model}}
    <a href="#" {{action 'selectItem' item}}>
        {{item.title}}
    </a>
    <br/>
{{/each}}

<div> 
  {{selectedItem.description}}
</div>

edited May 17, 2014 at 3:17

Kingpin2k

47.4k10 gold badges80 silver badges97 bronze badges

answered May 17, 2014 at 2:37

andrewohyeah

562 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SuperMarco Over a year ago

Oh dude !! That perfect and fit perfectly to my project !! I wanted to use it with the data from the indexedBD but with this I don't even need to fetch the data from the database :)

SuperMarco Over a year ago

I'm coming back to you because, I have one problem with this solution. If I have url of images inside my data, I can't display the first image by using {{selectedItem.images}} with a bind-attr, I don't know why, but it doesn't work. Do you know why ?

andrewohyeah Over a year ago

Does this fiddle describe your problem? http://jsfiddle.net/JJdcz/ If not, could you post one that does?

SuperMarco Over a year ago

Yes this is exactly my problem!

Collectives™ on Stack Overflow

Emberjs display array of item

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related