ember.js - 在我的 Controller 中，我无法从模板中的表单中读取值

Question

我在我的 HTML 中定义了以下模板:

<script type="text/x-handlebars" data-template-name="application">
    <div>
        <p>{{outlet}}</p>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="registration">
    <form autocomplete="on">
        First name:<input type='text' name='firstName'><br>
        Last name: <input type='text' name='lastName'><br>
        E-mail: <input type='email' name='primaryEmailAddress'><br>
        Password: <input type='password' name='password' autocomplete='off'><br>
        <button type='button' {{action 'createUser'}}>Register</button>
    </form>
</script>

我的 JavaScript 如下:

App.UsersController = Ember.ObjectController.extend({
    createUser : function () {
        var name = this.get('firstName');
    }
});

当我单击表单上的按钮时，将调用“createUser”函​​数。但是，我无法从表单中读取任何值。

我的观点如下:

App.UsersView = Ember.View.extend({
    templateName : 'registration'
});

我很感激它在我的 Controller 和模板之间建立了关联，但是在这种情况下我没有看到任何其他值 - 它是否为我提供了其他任何东西？

Answer 1

原因是您没有将输入字段中的任何值绑定(bind)到 Controller 中的任何属性，您可以使用 Ember 的内置 Ember.TextField如下

<script type="text/x-handlebars" data-template-name="registration">
  <form autocomplete="on">
    <!-- 
        The valueBinding="firstName" binds the value entered by the user in the
         textfield to the property firstName in the controller
    -->
    First name:{{view Ember.TextField valueBinding="firstName"}}<br>
    Last name:{{view Ember.TextField valueBinding="lastName"}}<br>
    E-mail:{{view Ember.TextField valueBinding="email"}}<br>
    Password: {{view Ember.TextField valueBinding="password" type="password"}}<br>
    <button type='button' {{action 'createUser'}}>Register</button>
  </form>
</script>

现在可以获取权限了

App.UsersController = Ember.ObjectController.extend({
  createUser : function () {
    alert(this.get('firstName'));
    alert(this.get('lastName'));
    alert(this.get('email'));
    alert(this.get('password'));
  }
});

fiddle : http://jsfiddle.net/QEfCG/4/