javascript - Set select default value with Ember.Select - Stack Overflow

admin管理员组

文章数量:1324821

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.

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.

• javascript
• ember.js

Share Improve this question Follow edited Jan 25, 2012 at 14:36 skaffman 404k9696 gold badges824824 silver badges775775 bronze badges asked Jan 25, 2012 at 14:34 PrincaPrinca 44722 gold badges99 silver badges1919 bronze badges 1

• I changed selectionBinding="2012" the drop down list is generated but the selection is null. it's not binding to the value ... Or should I use some other value for this selectionBinding? – Princa Commented Jan 25, 2012 at 15:14

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I was going to make a jsfiddle for this but it seems down at the moment. Will edit one in if it es 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.

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.

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 acplish what you are trying to do in a more generic way. http://jsfiddle/ 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.

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 puted 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 puted properties: http://emberjs./api/classes/Ember.ComputedProperty.html

本文标签： javascriptSet select default value with EmberSelectStack Overflow