I'd like to do two-way data binding on not initialized object. It looks like this:
host-element.html
<template>
<profile-basics-editor profile="{{profile}}"></profile-basics-editor>
</template>
JS:
Polymer({
is: 'profile-editor',
properties: {
profile: {
type: Object,
notify: true
}
}
});
child-element.html
<template>
<paper-input value="{{profile.nick}}"></paper-input>
<paper-input value="{{profile.age}}"></paper-input>
</template>
JS:
properties: {
profile:{
type: Object,
notify: true
}
}
The problem is that the profile
property on host element is not updated when I change input value. It is, however, updated inside a child element. But nothing get out of it.
I also tried path binding inside host element:
<profile-basics-editor
profile-nick="{{profile.nick}}"
profile-age="{{profile.age}}">
</profile-basics-editor>
child-element.html
properties: {
profileNick:{
type: String,
notify: true
},
profileAge:{
type: Number,
notify: true
}
}
But with the same result. Profile
wasn't changed on the host side.
Finally, I've tried profile
object initialization in host element:
profile: {
type: Object,
notify: true,
value: function(){
return {
age: '',
nick: ''
};
}
}
Then it worked.
So, after reading the docs for the 3rd time I'm wondering if it should work like this. I mean, do I really need to initialize an object at some point so the data binding will work? Is there a way to do it different?
Just to explain, profile
object wasn't initialized because it is a registration form so there isn't any data to be initialized. And what if I receive profile
data from the datastore without some properties because user hasn't filled them up earlier and the API doesn't send empty properties. It means that I need to check this object for lack of properties. It's not a JavaScript way to do it.
Two-way bindings were quite a challenge for me, too. In such cases I try to help myself by sketching the flow of changes and events
case without initialisation
host child paper-input (age)
| | |
profile=undefined profile=undefined value=undefined
// typing
value='v1'//->fire change event
//->receive change event
//set profile.age->no profile->done
case with initialisation
| | |
profile=undefined profile=undefined value=undefined
//initialize with {age:''}
profile={age:''}
//->fire change
//->receive change
profile={age:''}
//->fire change
//->receive change
value=''
//typing
value='v1'//->fire change
//->receive change
profile.age='v1'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.