emberjs dynamic select valueBinding with ajax contentBinding

Question

With emberjs I'm using Em.Select to display a list of options populated by JSON retrieved via AJAX.

{{view Em.Select
    valueBinding="profile"
    contentBinding="App.profiles"
    selectionBinding="profile"
    optionValuePath="content.id"
    optionLabelPath="content.name"
    prompt="Please select a profile"}}

It works as expected when used in the create form however when in an edit form the value doesn't automatically get selected.

This is causing problems because I have a chain of 3 select inputs that rely on what option is selected in the preview list.

Can anybody explain how to prevent option selection until the JSON list has been populated?

Solved:

Thank you for your help. The way I got it working in the end was by wrapping the select view in an if statement like so:

 {{#if App.Profiles}}
     {{view Em.Select
         valueBinding="profile"
         contentBinding="App.profiles"
         selectionBinding="profile"
         optionValuePath="content.id"
         optionLabelPath="content.name"
         prompt="Please select a profile"}}
 {{/if}}

kroofy suggested that I wrap it in an if statement that observed an isLoaded property but as my profiles object doesn't have one I tried checking for App.Profiles and it worked.

I don't see any selectionBinding defined on the select, typo? — intuitivepixel
Yes that was a typo, I copied it from my create template by accident. Updated the question with the proper select example. — Brayniverse

kroofy kroofy · Accepted Answer · 2013-09-03T12:03:25

Possibly you could wrap it in a conditional. So that it only shows the Select when the profiles have been loaded.

{{#if App.profiles.isLoaded}}
    {{view Em.Select
        valueBinding="profile"
        contentBinding="App.profiles"
        selectionBinding="profile"
        optionValuePath="content.id"
        optionLabelPath="content.name"
        prompt="Please select a profile"}}
{{/if}}

or maybe you just need to add the id to the valueBinding.

valueBinding="profile.id"

emberjs dynamic select valueBinding with ajax contentBinding

Solved:

1 Answers