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

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

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

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

在项目目录中，转到app＆gt;组件＆gt;密码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'));  
    }    
  }  
});

转到应用＆gt;模板＆gt;组件＆gt;密码的组成部分。在那里，将{{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>

在应用中＆gt;模板＆gt; application.hbs，只需添加以下内容即可添加您刚刚创建的组件：“{{password-component}}”
构建项目（“ember s”）
您的组件应该是可见的。将内容添加到输入字段并单击提交，应显示您刚输入的内容。

Answer 2

有两种常见方法。

解决方案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}}

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

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

Answer 3

我不确定这是不是你要找的。基本上，您的表单组件在下面声明，只需调用您的组件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>

如何将表单转换为ember组件？

3 个答案:

解决方案1

解决方案2

如何将表单转换为ember组件？

3 个答案:

解决方案1 ​​

解决方案2

解决方案1