如何将表单转换为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

可能迟到这个派对,但它可能会帮助别人.

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

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

3. 在项目目录中,转到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'));  
       }    
     }  
   });  
   

4. 转到app> templates> components> password-component.在那里,用{替换{{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>  
   

5. 在app> templates> application.hbs中,只需添加以下内容即可添加您刚刚创建的组件:"{{password-component}}"

6. 建立你的项目("ember s")

7. 您的组件应该是可见的.将内容添加到输入字段并单击"提交",应显示刚刚输入的内容.