CODEWITHSUNDEEP
javascriptember.js
Princa
Princa

Reputation: 447

Set select default value with Ember.Select

I am trying to use Ember.select to create a drop down list, my question is when it renders first time, I would like to set a default value. And once I change the selection, it won't check for default value until refresh the page.

Here is the code:

        ET.selectedAppYearController = Ember.Object.create({
            appYear: null,
            isChanged: function () {
                if (this.appYear != null) {
                    LoadETByAppYearETTypeID(this.appYear.text, ET.selectedEmailTypesController.emailType.email_template_type_id);
                }
            } .observes('appYear'),
            setDefault: function() {
                if (this.appYear.text == 2012) {
                    this.set('selection',2012);
                }
            } .observes('appYear')

        });

The View:

    {{view Ember.Select 
        contentBinding = "ET.appYearController.content" 
        selectionBinding="ET.selectedAppYearController.isDefault"
        optionLabelPath="content.text"
        optionValuePath="content.value"
    }}

I guess i need to set something on selectionBinding...but what kind of value I should bind to? 1. the drop down list values are JSON type.

Upvotes: 3

Views: 4362

Answers (4)

Damian Walczak
Damian Walczak

Reputation: 1334

Not sure if anyone still needs that, but the way I did it is binding to the value with something like 

{{view Ember.Select content=templates optionValuePath="content.id" optionLabelPath="content.name" value=selectedTemplateId class="form-control"}}

then in controller implement selectedTemplateId as computed property, working both as setter and getter: 

    selectedTemplateId: ( (key, value)->
    # setter code: 
    if arguments.length > 1
        @set('selTemplateId', value)
        return value

    # getter code
    else
        if @get('selTemplateId')?
            return @get('selTemplateId')
        else
            return @get('templates')?.objectAt(0).id
).property()

Sorry for CoffeeScript instead of js. JS version at: http://goo.gl/5FZHFh

A bit of docs for computed properties: http://emberjs.com/api/classes/Ember.ComputedProperty.html

Upvotes: 0

mlienau
mlienau

Reputation: 813

I'm way late to this party, but in the latest version of ember 0.9.7.1 there is a "prompt" attribute you can set in your Ember.Select. It looks something like,

{{view Ember.Select
    prompt="This is selected by default"}}

Hope that helps some one.

Upvotes: 2

Tom Whatmore
Tom Whatmore

Reputation: 1327

I was going to make a jsfiddle for this but it seems down at the moment. Will edit one in if it comes back up later as they usually make things clearer.

If you set the view to

{{view Ember.Select 
  contentBinding = "ET.appYearController" 
  selectionBinding="ET.selectedAppYearController.appYear"
  optionLabelPath="content.text"
  optionValuePath="content.value"
}}

and then set up the selectedAppYearController with something like:

ET.selectedAppYearController = Ember.Object.create({
  appYear: ET.appYearController.get('lastObject')
}

then you should have the last element in your appYearController set as default, and when you change the selection ET.selectedAppYearController.appYear will reflect this.

Obviously if you want something other than the last element of your appYearController then you can set the value of appYear to whatever you want.

Upvotes: 4

Sean O'Hara
Sean O'Hara

Reputation: 1218

It's hard to tell from your code example. One thing you could do is extract all your domain specific requirements and set up a live jsfiddle example that tries to accomplish what you are trying to do in a more generic way. http://jsfiddle.net/ You can see examples of using jsfiddle in other emberjs posts here.

But one thing I remarked is that your selectionBinding appears to be wrong. This should bind to the value you are trying to set, not a default. You could set a default in the controller if you like (just by assigning it to the value bound by selectionBinding). So I think your selectionBinding should be "ET.selectedAppYearController.appYear" if I understand your example correctly.

Upvotes: 1

Related Questions