Ember.Select valueBinding / itemController / needs

1

Hello,

I’m trying to populate an Ember.Select with data from a controller loaded into the context with needs.

I’m using Ember-App-Kit and Ember-Data.

Ember      : 1.4.0-beta.2 
Ember Data : 1.0.0-beta.6
Handlebars : 1.3.0 
jQuery     : 2.0.3

I have some titles, that are needed by other controllers, so I get the data on init :

App.TitlesController = Em.ArrayController.extend({
  init: function() {
    this._super(arguments);

    this.store.find('title').then(function(titles) {
      titles.forEach(function(t) {
        // actually, I'm doing some processing here
        // but it has no impact on my issue
        _self.pushObject({
          id: t.id, 
          label: t.label});
      });
    });
  }
});

I have an identity model :

App.Identity = DS.Model.extend({
  firstname: DS.attr(), 
  title: DS.attr()
});

and the controller (actually an itemController inside a {{#each}} loop) :

App.IdentityController = Em.ObjectController.extend({
  needs: ["titles"],
  titleList: Em.computed.equal('controllers.titles'),

  selectedTitle: function(key, value) {
    // I have tried different ways to "alias" the current title
  }.property('title')
});

Now the template :

{{#each identitys itemController='identity'}}
{{title}} {{selectedTitle}}
{{view Ember.Select 
            contentBinding="titleList"
            valueBinding="selectedTitle"
            optionLabelPath="content.label"
}}
{{firstname}}

(I removed optionValuePath as it will map on content.id)

{{title}}, {{selectedTitle}} and {{firstname}} render correctly, but the value for Ember.Select view is not set.

I’ve tried different implementations for my selectedTitle computed property :

  • alias
selectedTitle: Em.computed.alias('title')

The binding seems OK, but the value for Ember.Select is not set.

  • value
selectedTitle: function(key, value) {
  if ( value ) { // setter
    this.set('title', value);
  } else { // getter
    return this.get('title');
  }
}.property('title')

Binding OK, but Ember.Select value not set

  • object
selectedTitle: function(key, value) {
  if ( value ) { // setter
    this.set('title', value.id);
  } else { // getter
    return this.get('titleList').findBy('id', this.get('title'));
  }
}.property('title')

With this, the binding seems OK within the Ember.Select view.

However, it seems that the first time the template renders, the titles controller content is not set (promise has not fulfilled ?).

Therefore its alias titleList is undefined, and so is selectedTitle (= this.get('titleList').findBy('id', this.get('title')).

Moreover, because of the binding, it sets my model’s property to undefined…

  • What am I doing wrong ?
  • Am I using the init method properly ?
    I tried with this.get('titles').then() : I get a “No then method” error
    Can I have the controller wait for the promise to fulfill ?
  • Should I have the route load the titles data (with setupController) instead ?

Any suggestion welcome !

2

I’ve made a JSFiddle to illustrate my issue. (edit: I had forgottent to save the fiddle…)

I’ve combined different possibilities : valueBinding vs selectionBinding ; null vs value.

In examples 3 and 4, I would expect the select be set to my value, but it appears that the value, bound either with valueBinding or selectionBindng, is reset somehow by the Ember.Select View.

3

In your JSFiddle example you use variables, wich are not defined in the application controller e.g {{mysecondval}}. You need to use something like {{controllers.mylist.mysecondval}}.

1 Like
4

Indeed. It seems so obvious now. Thanks a lot.