lundi 12 septembre 2016

How to call Ember component from other component?

I have these components and I want them can be call from other component.

templates/components/post-edit.hbs

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <form id="" method="post" enctype="multipart/form-data">
                <div class="form-result-placeholder"></div><!--.form-result-placeholder-->
                <div class="form-group">
                    <label for="name">Name</label>
                    
                </div>
                <div class="form-group">
                    <label for="file">File</label>
                    
                    
                    <small id="file_help">JPG only, less than 1 MB.</small>
                </div>
                <button type="submit"  class="btn btn-primary">Submit</button>
                <a href="./" class="btn btn-secondary">Go back</a>
            </form>
        </div>
    </div>
</div>

components/post-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);
            //console.log(Ember.Component.FormAlert);// undefined
            //$('.form-result-placeholder').html('');// not working
        });
    }),
    editSave: Ember.computed(function() {
        console.log('saving edit data');
    }),
    ajax: Ember.inject.service(),
    isEditing: false,
});

templates/components/form-alert.hbs

FORM ALERT!!!

components/form-alert.js

import Ember from 'ember';

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

export default FormAlert;

I want to call form-alert component from inside post-edit.js file.
How to call Ember component from other component?

My Ember version: 2.8.0




Aucun commentaire:

Enregistrer un commentaire