How to bind multiple properties to child component at once?


#1

Let’s say I have something like this:

= parent-component
  = child-component property=property

It is bind so when I change it in one place it also updates in another.

But when parent has for example 10 properties in a table and wants to bind them all to child is it possible to do something like:

= parent-component
  = child-component table-of-properties=myTable

and then update parent property from child:

this.set(myTable[0], 'new string')

or should I do this in some different way?

I thought they get automatically bind if they exist in parent but it turned out I was wrong and when I have some property in parent and try to update it from child, it gets set separately for child and for parent.

EDIT: I figured I can do that almost-comfortably with positional params. I just want to know if it’s possible to have both positional and named params?


#2

You can’t update properties like this:

this.set(myTable[0], 'new string')

If you have an array of properties, you need to use the [array methods] to change them. Further, you generally don’t want an array of strings because strings aren’t real objects in javascript. Use an array of objects instead.


#3

First, positional params also have name, you just don’t have to specify it, but if you do, they will work as normal property

Second, for your requirement, it is better to use hash helper to wrap all properties as an object, it is much more easier to read and process


#4
var obj = Ember.Object.create({
 prop1: tableA.val1,
prop2: tableA.val2,

. . . propn: tableA.valn, });

Pass this obj to the child component as “table-of-properties=obj”, and in component use as

table-of-properties.val1 table-of-properties.val2 … … . table-of-properties.valn