Как превратить мою форму в компонент 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

1. Создайте новый проект - "уголек новой быструю-форму"
2. Перейдите в этот каталог и введите - «уголек г компонентный компонент-компонент "

3. В каталоге проектов перейдите в приложение> 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. Перейти к приложению> шаблоны> Компоненты> паролем компонент. Там, замените {{выход}} с этим:

   <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. В приложение> Шаблоны> application.hbs, добавить компонент, который вы только что создали, просто добавив следующее: «{{пароль-компонент}} "

6. Построить свой проект (" уголек s ")

7. Ваш компонент должен быть виден. Добавление содержимого в поле ввода и нажатие на submit должно содержать содержимое того, что вы только что ввели.

Answer 2

Я не уверен, что это то, что вы ищете. В основном ваша форма компонент объявить ниже, и вы можете получить доступ из любой точки мира, просто позвонив идентификатор компонента {{знак-форма}}

<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>