CODEWITHSUNDEEP
ember.js
abFx
abFx

Reputation: 313

Load a view on ember select change?

How can you load a view or template content when ember select element changes?

I'm barely new to ember, this might be quite easy but I've been struggling too much already for this simple task. Any suggestions?

Upvotes: 0

Views: 481

Answers (2)

Mike Grassotti
Mike Grassotti

Reputation: 19050

Following up on @intuitivepixel's answer, here is how to dynamically load a template based on select change. 

//EMBER APP TEMPLATE
App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
  model: function(){
      return [
          {name: 'Kris', template: 'kris'},
          {name: 'Luke', template: 'luke'},
          {name: 'Alex', template: 'alex'}
      ];
  }
});

App.EmbeddedView = Ember.View.extend({
  templateName: Ember.computed.alias('controller.selected'),
  templateNameDidChange: function() {
    this.rerender();
  }.observes('templateName')
});

<script type="text/x-handlebars">
  <h4>Load a view on ember select change?</h4>
  {{view Ember.Select 
         contentBinding="this" 
         optionValuePath="content.template" 
         optionLabelPath="content.name" 
         valueBinding="selected" 
         prompt="Please select a name"
  }}
  <hr/>
  {{view App.EmbeddedView}}
</script>
<script type="text/x-handlebars" id="luke">
  THE LUKE TEMPLATE
</script>
  <script type="text/x-handlebars" id="alex">
  THE ALEX TEMPLATE
</script>
  <script type="text/x-handlebars" id="kris">
  THE KRIS TEMPLATE
</script>

This example will switch between the luke/alex/chris templates depending on the select box.

See this jsbin for a live example: http://jsbin.com/uzekop/1/edit

Upvotes: 2

intuitivepixel
intuitivepixel

Reputation: 23322

Although you should post some code of what you have tried, this example might help you get started so you can improve your question.

See here for an example on how you could change a button label depending on the selected value of a select box.

Hope it helps.

Upvotes: 2

Related Questions