3

I found a good solution for a reusable select view here: select dropdown with ember (the answer by @ebryn)

However, I'm having difficult finding a way to use this for objects that have an id attribute. What I mean is that I want to be able to use the select view for managing associations on persisted object.

I have forked the js fiddle here: http://jsfiddle.net/sohara/rgDQr/13/ Currently there is no way to persist the selections and person attribute of my thingController is set on page load. Is there a good way to change this so that the select manages just the id value, but still display, for instance, the fullName attribute?

I suppose I could add callback in the thingController that sets the personId based off the id value of its person object, but that doesn't solve the issue of persistence. Every page load would then reset the personId attribute. Plus I think it would make sense to target the personId attribute directly from the view if that is the attribute I want to change?

Thanks, Sean

Community
  • 1
  • 1
Sean O'Hara
  • 1,218
  • 1
  • 11
  • 19

1 Answers1

3

Ember now has a built-in Select view.

You can find it in the latest Ember.js build here: http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js

Here's an example usage:

var App = Ember.Application.create();

App.Person = Ember.Object.extend({
    id: null,
    firstName: null,
    lastName: null,

    fullName: function() {
        return this.get('firstName') + " " + this.get('lastName');
    }.property('firstName', 'lastName').cacheable()
});

App.selectedPersonController = Ember.Object.create({
    person: null
});

App.peopleController = Ember.ArrayController.create({
    content: [
        App.Person.create({id: 1, firstName: 'Yehuda', lastName: 'Katz'}),
        App.Person.create({id: 2, firstName: 'Tom', lastName: 'Dale'}),
        App.Person.create({id: 3, firstName: 'Peter', lastName: 'Wagenet'}),
        App.Person.create({id: 4, firstName: 'Erik', lastName: 'Bryn'})
    ]
});

Your template would look like:

{{view Ember.Select
       contentBinding="App.peopleController"
       selectionBinding="App.selectedPersonController.person"
       optionLabelPath="content.fullName"
       optionValuePath="content.id"}}

Again, here's a jsFiddle example: http://jsfiddle.net/ebryn/zgLCr/

ebryn
  • 4,407
  • 1
  • 23
  • 21
  • Thanks, ebryn. That is almost exactly what I am looking for. There are two questions I still have about this approach, though. The first is whether the selection object should be person attribute or just a personId attribute (like I did in this fork: http://jsfiddle.net/sohara/978Ud/25/ ). I guess you are leaning towards the former since I noticed you just made commit of this pattern to the ember.js repo. The other question is how to get the selection to track the value on selectedPersonController on page load. Right now it always resets to index 0. – Sean O'Hara Jan 22 '12 at 17:08
  • Here's an example of what I was trying to accomplish: http://jsfiddle.net/sohara/978Ud/66/ The idea is that, in the case where the selectedPersonController is proxying a persisted model object, that the correct option would be pre-selected prior to any user interaction. So I wanted the didInsertElement function to preselect the item that matches the selection binding. I would be happy to hear if there are problems with the way I've done it in the fiddle. Thanks! – Sean O'Hara Jan 22 '12 at 18:57
  • I'm working on the Select view that will be included with Ember. It does what I think you're looking for regarding initial selection. You can check it out here: https://github.com/emberjs/ember.js/pull/424/files – ebryn Jan 22 '12 at 21:01