Data down binding for child components in Emblem.js

Question

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

{{Child1 childInfoArray=infoArray}}

but I'm using Emblem.js instead of 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!

Interesting side note, I have several text entry fields and date-time pickers.

The date-time pickers get picked up by the parent component when saving the data to the database, but the entry fields say that there is no object bound to them.

Answer 1

I figured it out, using the = I can send any classic handlebar through Emblem, the solution was way more simple than I thought

Child1.js

export default Ember.Component.extend({
    infoArray:null,
}

Parent.emblem

if isVisibleChild1
    = Child1 infoArray=infoArray

Child1.emblem

select id="newInfo" onchange={action (mut infoArray) value="target.value"}

I can bind everything in this way

= Child1 infoArray=infoArray property2=property2 myFunction=myFunction

Answer 2

The idea here is that you don't have access to infoArray in your Child1.emblem file. You bind the parent infoArray on childInfoArray. So 2 choices.

Or you change the name of your binding key childInfoArray to infoArray into Parent.emblem :

if isVisibleChild1
    = Child1
    infoArray = infoArray

Or you use the appropriate key into Child1.emblem :

select id="newInfo" onchange={action (mut childInfoArray) value="target.value"}

Does it helps ?