如何在ember.js中获取文本框值

Question

我就在前一天开始研究ember.js.我不知道如何在提交时获取文本框值.我试过这样的

这是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>

这是我的ember.js文件

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

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


           }
          });

无论何时我点击提交按钮,我都会在alert.so如何获得价值？我希望有人能帮助我继续使用ember.js

Answer 1

在这样的js

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

不需要模型

在这样的模板中

<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

您的问题是您的表单没有模型。您可以使用model或setupControllerhook 来提供它。

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

另外一些提示：

在表单中使用action name on="submit"，而不是action name在提交按钮中。因此，当用户在输入中按下回车键时，您可以执行该操作。

助手input type="text"是一个快捷方式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>

这里有一个现场演示