如何将表单变成 ember 组件？

Question

我有这个表格：

<form {{action 'resetPassword' on="submit"}}>
  {{input type="password" value=newPassword placeholder="reset password"}}<br>
  {{#if newPassword}}
    {{input type="password" value=confirmPassword placeholder="confirm password"}}
    {{#if passwordOK}}
      <button>Reset</button>
    {{/if}}
  {{/if}}
</form>

它依赖于可用的 resetPassword 操作以及 passwordOK 函数，该函数测试密码是否已输入且确认是否匹配。

这一切都很棒，但我认为我需要在我的应用程序中多次使用此表单。所以我想我应该把它做成一个组件。

如何将此表单变成可重用的组件？

我对如何利用这一块功能并使其在我的应用程序中可用很感兴趣。我如何打包并重新使用它？

Answer 1

我不确定这是否是您要找的。基本上你的表单组件在下面声明，你可以通过调用你的组件 ID {{sign-form}}

从任何地方访问

<script type="text/x-handlebars" id="form">
    {{signup-form}}
</script>


<script type="text/x-handlebars" id="components/signup-form">
    <form {{action 'resetPassword' on="submit"}}>
      {{input type="password" value=newPassword placeholder="reset password"}}<br>
      {{#if newPassword}}
        {{input type="password" value=confirmPassword placeholder="confirm password"}}
        {{#if passwordOK}}
          <button>Reset</button>
        {{/if}}
      {{/if}}
    </form>
</script>

Answer 2

这个派对可能会迟到，但它可能会对其他人有所帮助。

使用 Ember CLI 创建 Ember 表单组件的 5 分钟指南

生成一个新项目 - "ember new quick-form"
导航到该目录，然后键入 - "ember g component password-component"

在您的项目目录中，转到 app > components > password-component.js。在那里，用这个替换代码：

import Ember from 'ember';

export default Ember.Component.extend({  
  passwordOK: function(){
    return this.get('newPassword')===this.get('confirmPassword');
     }.property('newPassword','confirmPassword'),

actions: {  
resetPassword: function() {  
  alert(this.get('newPassword'));  
    }    
  }  
});

转到应用 > 模板 > 组件 > 密码组件。在那里，将 {{yield}} 替换为：

<form {{action 'resetPassword' on="submit"}}>  
  {{input type="password" value=newPassword placeholder="reset password"}}<br>  
    {{#if newPassword}}  
      {{input type="password" value=confirmPassword placeholder="confirm password"}}  
        {{#if passwordOK}}  
          {{input type="submit" value="submit"}}  
        {{else}}  
        passwords don't match  
        {{/if}}    
    {{/if}}  
</form>

在 app > templates > application.hbs 中，添加您刚刚创建的组件，只需添加以下内容：“{{password-component}}”
构建您的项目 ("ember s")
您的组件应该是可见的。将内容添加到输入字段并单击提交，应该会显示您刚刚输入的内容。

Answer 3

有两种常见的方式。

解决方案 1

这是最基本的解决方案。

组件 JS：

import Component from '@ember/component';
import layout from './template';

export default Component.extend({
  layout,
  tagName: 'form'
});

组件模板：

{{yield}}

用法：

{{#my-form submit=(action "resetPassword")}}
  {{input type="password" value=newPassword placeholder="reset password"}}<br>
  {{#if newPassword}}
    {{input type="password" value=confirmPassword placeholder="confirm password"}}
    {{#if passwordOK}}
      <button type="submit">Reset</button>
    {{/if}}
  {{/if}}
{{/my-form}}

调用您的 resetPassword 操作时，系统会向其传递一个事件对象，您需要对该事件调用 preventDefault()。

  actions: {
    resetPassword(e) {
      e.preventDefault(); // stops page from refreshing
      // do stuff
    }
  }

解决方案 2

这是一个更复杂的例子。您可能希望在内部处理 e.preventDefault()。此组件异步提交其操作。

组件 JS：

import Component from '@ember/component';
import layout from './template';

export default Component.extend({
  layout,
  tagName: 'form',
  isSubmitting: false,
  onSubmit() { /* pass this in */ },
  submit(e) {
    e.preventDefault();

    this.set('isSubmitting', true);

    Ember.run.later(() => {
      this.set('isSubmitting', false);
      this.onSubmit();
    }, 500);
  },
});

组件模板：

{{yield (hash isSubmitting=isSubmitting)}}

用法：

{{#my-form onSubmit=(action "resetPassword") as |form|}}
  <fieldset disabled={{form.isSubmitting}}>
    {{input type="password" value=newPassword placeholder="reset password"}}<br>
    {{#if newPassword}}
      {{input type="password" value=confirmPassword placeholder="confirm password"}}
      {{#if passwordOK}}
        <button type="submit">Reset</button>
      {{/if}}
    {{/if}}
  </fieldset>
{{/my-form}}

在此示例中，您的表单将通过 form 变量将 isSubmitting 属性传递给其父块模板。

此外，您的 resetPassword() 操作无需修改，可以保持原样。

如何将表单变成 ember 组件？

How do I turn my form into an ember component?

ember.js

ember-cli

解决方案 1

解决方案 2