How to get text box value in ember.js

Question

i have started to work on ember.js just day before. i don't know how to get text box value while submitting. i have tried like this

this is html

    <script type="text/x-handlebars" data-template-name="index">
    <div >
     <p>{{view Ember.TextField valueBinding="fname"}}</p>
    </div>
    <div>
    <p>{{view Ember.TextField valueBinding="lname"}}</p>
    </div>
    <button {{action save}}>submit</button>
    </script>

this is my ember.js file

          App = Ember.Application.create();
          App.IndexController = Ember.ObjectController.extend({

           save:function()
           {
              var fname=this.get('fname');
              var lname=this.get('lname');
              alert(fname+','+lname);


           }
          });

whenever i am clicking on submit button, i am getting undefined in alert.so how to get value? i hope anyone will help me for to continue in ember.js

Answer 1

in js like this

App.WebFormController = Ember.Controller.extend({
    fname: null,
    lname: null,
    save: function () {
        var fname = this.get('fname');
        var lname = this.get('lname');
        alert(fname + ',' + lname);
    }
});

without need a model

in template like this

<script type="text/x-handlebars" data-template-name="web_form">
    <form {{action save on="submit"}}>
        <div >
            <p>{{input type="text" valueBinding="fname"}}</p>
        </div>
        <div>
            <p>{{input type="text" valueBinding="lname"}}</p>
        </div>
        <button>submit</button>
    </form>
</script>

Answer 2

Your problem is that your form doesn't have a model. You can provide it using model or setupController hook.

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {};
  },
  // or
  setupController: function(controller) {
    controller.set('model', {});
  }
});

In addition some tips:

Use the action name on="submit" in the form, instead of action name in submit button. So you can execute the action when the user press enter key, in input.

And the input type="text" helper is a shortcut for view Ember.TextField

<script type="text/x-handlebars" data-template-name="index">
    <form {{action save on="submit"}}>
        <div >
            <p>{{input type="text" valueBinding="fname"}}</p>
        </div>
        <div>
            <p>{{input type="text" valueBinding="lname"}}</p>
        </div>
        <button>submit</button>
    <form>
</script>

Here a live demo