CODEWITHSUNDEEP
ember.js
romainberger
romainberger

Reputation: 4558

Emberjs - get the value of a component

I'm using a component to build select elements with Ember. Every time one of the select value is changed, I need to get the value of each of them. The problem is I can only get the value of the changed one. How can I select a component from the route?

Part of the app:

// the route
App.TeamsRoute = Ember.Route.extend({
    setupController: function() {
      // send the values to build the options
      App.Category.findAll().then(function(categories) {
        controller.set('categories', categories)
      })
    },

    actions: {
      updateTeams: function() {
        // action triggered when a select is changed
        var controller = this.get('controller')

        // ?????
      }
    }
})

// component to trigger the action
App.CustomSelectComponent = Ember.Component.extend({
  change: function() {
    this.sendAction('action')
  }
})

The templates:

// the way I build the element
{{custom-select choices=categories name="category" action="updateTeams"}}

// component template
<script type="text/x-handlebars" id="components/custom-select">
    <select name="{{name}}">
        {{#each choices}}
            <option value="{{unbound value}}">{{name}}</option>
        {{/each}}
    </select>
</script>

Upvotes: 1

Views: 2521

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

A component should be agnostic of your application, and vice-versa. That being said, they can react to actions (or underlying model changes, like choices=categories and action=updateTeams. Additionally you can send information with the action that you send. Whoever is reacting to the action and information sent should be keeping track of that information, instead of polling the component for it.

I've included a small example showing this concept in the following jsbin

http://emberjs.jsbin.com/IyACuvIx/1/edit

Upvotes: 2

Related Questions