Ember.JS value binding not working in Action

1
votes

I am trying to get value binding working properly in my Ember app. The binding works on the input, as in, when I type text into the input field it displays next to "Your Goal:". However, when I click "Next Step", it is not displaying the value properly.

Here is a JSBIN with my issue: http://emberjs.jsbin.com/buxega/edit?html,js,console,output

Goal Route

import Ember from 'ember';

export default Ember.Route.extend({
  goal: '',
  actions: {
    nextStep: function() {
      console.log('Goto next step: ', this.get('goal'));
    }
  }
});

Template

<section>
  <div class="pod__content">
    Your Goal: {{goal}}
    {{input type="text" value=goal}}
  </div>
  <footer>
    <button {{action 'nextStep'}} class="btn btn--red">Next Step</button>
  </footer>
</section>
2
javascriptember.js

2 Answers

1
votes

You set the value {{goal}} in the controller, not in the route.

import Ember from 'ember';

export default Ember.Controller.extend({
  goal: '',
  actions: {
    nextStep: function() {
      console.log('Goto next step: ', this.get('goal'));
    }
  }
});

http://emberjs.jsbin.com/nabeqakicu/1/edit?html,js,console,output

If you want to send the value to the route, you could do something like this:

<button {{action 'nextStep' goal}} class="btn btn--red">Next Step</button>

And you get it in your action:

export default Ember.Route.extend({
  goal: '',
  actions: {
    nextStep: function(goal) {
      console.log('Goto next step: ', goal);
    }
  }
});
0
votes

Another way of defining properties 

export default Ember.Route.extend({
    setupController: function(controller, model) {
            this._super(controller, model);

            controller.setProperties({
                foo: 'bar'
            });
     }
});