mercredi 5 septembre 2018

Data down binding for child components in Emblem.js

Environment, Ember w/ Emblem.js

Working on a project, and I'm trying to make it modular to dynamically pull in the correct form layout (child component) depending on what choice the user makes.

Problem I'm having is I have a child component with references to mutable objects in the parent that I am trying to access for read, and write.

I believe that I need to bind the data down, then push the mut action back up to the parent based on DDAU.

JS Parent.js

export default Ember.Component.extend({
store: Ember.inject.service(),
name: null,
infoArray: Ember.computed.map(....),
isVisibleChild1: false;
actions: {
    picker() {
        if(dropdown.value==1)
            this.set('isVisibleChild1', true);
    }
},

Child1.js

needs to contain a variable childInfoArray somewhere

I found online that to bind data from parent to child forms with hbs



Emblem.js Parent.emblem

if isVisibleChild1
    = Child1
    childInfoArray = infoArray

Child1.emblem I recognize that infoArray should probably be childInfoArray

select id="newInfo" onchange={action (mut infoArray) value="target.value"}
    each optionsArray as |selectOption|
        option selected={is-equal selectOption.key infoArray} value="#{selectOption.key}" = selectOption.value

I'm not sure where exactly the childInfoArray should go in Child1.js and I'm not totally sure how to bind it to an object in Child1.emblem

any help would be fantastic!




Aucun commentaire:

Enregistrer un commentaire