CODEWITHSUNDEEP
javascriptmodel-view-controllerbindingember.js
drew covi
drew covi

Reputation: 891

EmberJS Binding Content Between Controllers

I'm currently working with two data models, where Foo has a "toMany" property of type Bars. I'm now trying to create two select boxes where when the first populated with Foo's is picked, it refines the second listing only the Bars associated with that foo.

JSFiddle Here: http://jsfiddle.net/drew/6jLCy/

Code below, but it certainly doesn't work. It does go as far as setting the SelectBox values for the first, but doesn't populate the second with the corresponding bar value titles.

App = Em.Application.create();

App.store = DS.Store.create({
  revision: 7,
  adapter: DS.fixtureAdapter
});

/**************************
* Models
**************************/

App.Foo = DS.Model.extend({
    bars: DS.hasMany('App.Bar'),
    title: DS.attr('string')
});
App.Bar = DS.Model.extend({
    foos: DS.hasMany('App.Foo'),
    title: DS.attr('string')
});


/**************************
* Fixtures
**************************/

App.Foo.FIXTURES = [
    {
        id: 0,
        title: 'Footitle 1',
        bars: [0,1]
    },
    {
        id: 1,
        title: 'Footitle 2',
        bars: [0,1,2]
    }
];

App.Bar.FIXTURES = [
    {
        id: 0,
        title: 'Bartitle 1',

    },{
        id: 1,
        title: 'Bartitle 2'
    },{
        id: 2,
        title: 'Bartitle 3'
    }
];


/**************************
* Views
**************************/

App.SetFooField = Em.Select.extend({
    contentBinding: 'App.fooController',
    valueBinding: 'content.selected',
    optionLabelPath: 'content.title'
});

App.SetBarField = Em.Select.extend({
    contentBinding: 'App.barController',
    valueBinding: 'content.selected',
    optionLabelPath: 'content.title'
});

/**************************
* Controllers
**************************/

App.fooController = Em.ArrayController.create({
    content: App.store.findAll(App.Foo)
});

App.barController = Em.ArrayController.create({
    contentBinding: 'App.fooController.selected.bars'
});​

Markup for the html:

<script type="text/x-handlebars">

    {{view App.SetFooField}}
    {{view App.SetBarField}}

</script>​

Upvotes: 8

Views: 313

Answers (1)

drew covi
drew covi

Reputation: 891

holy cow. after many days of going nearly nuts, it turns out this is entirely a bug in the latest ember-data. in fixtures, all ids need to be strings. just. plain. nuts.

/**************************
* Fixtures
**************************/

App.Foo.FIXTURES = [
    {
        id: '0',
        title: 'Footitle 1',
        bars: ['0','1']
    },
    {
        id: '1',
        title: 'Footitle 2',
        bars: ['0','1','2']
    }
];

App.Bar.FIXTURES = [
    {
        id: '0',
        title: 'Bartitle 1',

    },{
        id: '1',
        title: 'Bartitle 2'
    },{
        id: '2',
        title: 'Bartitle 3'
    }
];

failed to get embedded's object property using ember.js with ember-data

huge thanks to @dgeb for answering that question.

jsfiddle updated accordingly.

http://jsfiddle.net/drew/6jLCy/

Upvotes: 1

Related Questions