Modifying a Handlebar template based on dropdown value

Question

Based on dropdown selected i.e if B is selected the template has to be modified for B.

Template -

    <script type="text/x-handlebars" id="search">

                            ...

                            <div class="controls">
                                <select class="input-medium focused">
                                            <option>Any</option>
                                            <option>A</option>
                                            <option {{action 'chosenB'}} >B</option>
                                            <option>C</option>
                                            <option>D</option>
                                </select> 
                            </div>

                          {{#if searchB}} 
                               //Show view specific to B-only  
                          {{/if}}
    </script>

Router -

            App.Router = Ember.Router.extend({

                this.resource('search');

            });

            SearchController = Ember.ObjectController.extend({

               searchB: false,

               chosenB: function() {
               this.set('searchB', true);
               },

            });

So, when I goto URL /search, intially B's only view is not shown as IF condition is not met. But, when a user selects B from dropdown, I have called action chosenB of SearchController from template which should have set the 'searchB" to true and B-only view should have appeared which is not happening..

Can you please help finding mistake here ..

Ember - 1.0.0-RC.2

intuitivepixel intuitivepixel · Accepted Answer · 2013-04-07T14:35:31

Ember.js has a built-in Select view, please check out this doc http://emberjs.com/api/classes/Ember.Select.html, I think your problem is binding related, using the right component for the job would have the desired behaviour.

hope it helps

Modifying a Handlebar template based on dropdown value

1 Answers