Как назвать компонент Ember от другого компонента?

Question

У меня есть эти компоненты, и я хочу, чтобы они могли быть вызваны из другого компонента.

шаблоны/компоненты/пост-edit.hbs

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <form id="{{if isEditing 'form-edit' 'form-add'}}" method="post" enctype="multipart/form-data"> 
       <div class="form-result-placeholder"></div><!--.form-result-placeholder--> 
       <div class="form-group"> 
        <label for="name">Name</label> 
        {{input id="name" class="form-control" name="name" placeholder="Name" value=name required="required"}} 
       </div> 
       <div class="form-group"> 
        <label for="file">File</label> 
        {{input type="hidden" name="MAX_FILE_SIZE" value="1048576"}} 
        {{input id="file" class="form-control" type="file" name="file" aria-describedby="file_help"}} 
        <small id="file_help">JPG only, less than 1 MB.</small> 
       </div> 
       <button type="submit" {{action 'addNew'}} class="btn btn-primary">Submit</button> 
       <a href="./" class="btn btn-secondary">Go back</a> 
      </form> 
     </div> 
    </div> 
</div> 

компоненты/пост-edit.js

import Ember from 'ember'; 
import config from 'php-api-ember-test/config/environment'; 

export default Ember.Component.extend({ 
    actions: { 
     addNew() { 
      console.log('hit on submit button from add page'); 
      this.get('addNew'); 
     }, 
     editSave() { 
      console.log('hit on submit button from edit page'); 
      this.get('editSave'); 
     } 
    }, 
    addNew: Ember.computed(function() { 
     console.log('adding new data'); 
     var formData = new FormData($('#form-add')[0]); 
     this.get('ajax').request(config.APP.phpApiUrl+'/add', { 
      method: 'POST', 
     }) 
     .catch(function(error) { 
      console.log(error); 
      var response = error.errors[0].detail; 
      console.log(response); 
      // I want to call other component and render from here and put it in form-result-placeholder class. 
      //console.log(Ember.Component.FormAlert);// undefined 
      //$('.form-result-placeholder').html('{{form-alert}}');// not working 
     }); 
    }), 
    editSave: Ember.computed(function() { 
     console.log('saving edit data'); 
    }), 
    ajax: Ember.inject.service(), 
    isEditing: false, 
}); 

шаблоны/компоненты/форм-alert.hbs

FORM ALERT!!! (this alert message will be change by ajax response. it is not static.) 

компоненты/форм-alert.js

import Ember from 'ember'; 

const FormAlert = Ember.Component.extend({ 
}); 

export default FormAlert; 

Я хочу вызвать form-alert компонент внутри после edit.js файл после AJAX запроса.
Я хочу вызвать другой компонент и сделать после запроса ajax и поместить его в класс form-result-placeholder.
Как назвать компонент Ember из другого компонента и визуализировать его в целевой элемент?

My Ember версия: 2.8.0

Answer 1

Взгляните на this вопрос. Вам нужно использовать форму блока и установить действие для дочернего компонента.