CODEWITHSUNDEEP
javascriptjqueryember.jshandlebars.js
Mythli
Mythli

Reputation: 6305

Learning Ember.js- How Would I do this?

To learn Ember.js I started writing a small bookmark application. Bookmarks with the selected label should be displayed in the bottom box.

Template:

...
{{#each itemController="label"}}
  <li>
    <a href="#" {{bind-attr class=":label active:label-primary:label-default"}} {{action 'findLinks'}}>{{name}}</a>
  </li>
{{/each}}
...
{{#each links}}
  <li>{{name}}</li>
{{/each}}
...

App.LabelController:

...
App.LabelController = Ember.ObjectController.extend({
    needs: ["list"],
    active: false,

    actions: {
        findLinks: function() {
            var listController = this.get('controllers.list');

            this.toggleProperty('active');
            listController.set('model', this.get('store').find('link'));
        }
    }
});
...

Label Data:

App.Label = DS.Model.extend({
    links: DS.hasMany('link'),
    name: DS.attr('string'),
    color: DS.attr('string')
});

App.Label.FIXTURES = [
    {
        id: 1,
        name: 'Develop',
        color: 'blue'
    },
    ...
];

Link Data:

App.Link = DS.Model.extend({
    labels: DS.hasMany('label'),
    name: DS.attr(),
    url: DS.attr()
});

App.Link.FIXTURES = [
    {
        id: 1,
        name: 'Google',
        url: 'http://google.com',
        labels: [1]
    },
    ...
];

The issue I have now is that setting the model in LabelController doesn't update the list of links. I also doubt that this is the right approuch.

How would you do such a thing in Ember?

Edit: http://jsbin.com/Ovuw/81/edit

Upvotes: 0

Views: 140

Answers (1)

Edu
Edu

Reputation: 2520

Is this what you want? http://jsbin.com/Ovuw/83/edit I commented the code, if you have questions be free to comment

Good luck

Upvotes: 1

Related Questions