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.

I know this may be inappropriate, I understand It's not always as simple as that (project already existing etc ...); But if it's a new one and you have liberty on what you can do, can I advise you to switch for mustaches ? The community is much bigger and it will be easier for you to get answers. I have to say I am good with emberjs, but I can't help you on this. Cheers — Nathan Gouy, Sep 07 '18 at 07:48
I wish that I could just use the tools with more support, but as you said, existing project, I can't just start from scratch. — Kindar Conrath, Sep 07 '18 at 14:48
I posted the solution I found in the answers section. Thanks! — Kindar Conrath, Sep 07 '18 at 19:26
mhm ... the solution is all about the var naming ... nothing to do with handlebar or not but .. anyway. Glad my answer helped you ;) — Nathan Gouy, Sep 08 '18 at 06:00

Nathan Gouy · Answer 1 · 2018-09-07T08:09:32.007

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 ?

score 0 · Accepted Answer · answered Sep 07 '18 at 17:55

0

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

answered Sep 07 '18 at 17:55

Kindar Conrath

11
5

the problem was here : `= Child1 childInfoArray = infoArray`. Now you changed it to `= Child1 infoArray=infoArray`. You can bind whatever you want with whatever you need. Keep in mind that when you call your child component, the var name at the left is the way you can access it in your child, and the var_name at the right is the parent var_name containing the value you want to pass : `= Child1 pp1=pp2` works. It's just that now you can access, from the child, the value of parent `pp2` with `pp1` – Nathan Gouy Sep 08 '18 at 06:02

Data down binding for child components in Emblem.js

2 Answers2