在Ember 2.2中创建表单选择列表

时间:2016-02-21 19:30:23

标签: ember.js

您好我正在尝试创建一个选择列表作为登录表单的一部分。表单提交并传递两个输入文本值,但没有看到选择列表。

<form id="form-login" {{action 'authenticate' on='submit'}}>
    <fieldset>
        {{input id='identification' value=identification placeholder='Username'}}
        {{input id='password' value=password placeholder='Password' type='password'}}

        <select id="language" name="language">
            <option value="ENG">English</option>
            <option value="">Not English</option>
        </select>
    </fieldset>

    {{#if errorMessage}}
    <div>
        <strong>Login failed:</strong> {{errorMessage}}
    </div>
    {{/if}}

    <button type="submit" class="btn btn-default">Login</button>
</form>

我尝试了这些步骤,但是它说它们已被弃用而且不起作用? http://emberjs.com/api/classes/Ember.Select.html

{{view "select" content=languages value=selectedLanguage}}

这是他能找到的文件中唯一的一页?

谢谢!

1 个答案:

答案 0 :(得分:2)

需要在上下文中设置所选值。现在,价值根本没有设定。

<强>控制器

import Ember from 'ember';
export default Ember.Controller.extend({
  language: 'English',
  languages: ['English', 'Non English'],
  actions: {
    authenticate() {
      // Set values from form and submit to server...
    }
  }
});

<强>模板

<form id="form-login" {{action 'authenticate' on='submit'}}>
  <fieldset>
    {{input id='identification' value=identification placeholder='Username'}}
    {{input id='password' value=password placeholder='Password' type='password'}}

    <select onchange={{action (mut language) value="target.value"}} id="language" name="language">
      {{#each languages as |languageChoice|}}
        <option value={{languageChoice}} selected={{eq language languageChoice}}>{{languageChoice}}</option>
      {{/each}}
    </select>
  </fieldset>

  {{#if errorMessage}}
    <div>
      <strong>Login failed:</strong> {{errorMessage}}
    </div>
  {{/if}}

  <button type="submit" class="btn btn-default">Login</button>
</form>

以下是a post with a good explanation所发生的一切。