javascript – Polymer 1.0绑定到未初始化对象的子属性

我想对未初始化的对象进行双向数据绑定.它看起来像这样：

主机element.html

<template>
  <profile-basics-editor profile="{{profile}}"></profile-basics-editor>
</template>

JS：

Polymer({
  is: 'profile-editor',
  properties: {
    profile: {
      type: Object,
      notify: true
    }
  }
});

儿童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
  }
}

问题是当我更改输入值时,主机元素上的配置文件属性不会更新.但是,它在子元素内更新.但没有什么可以摆脱它.

我还尝试了在host元素中的路径绑定：

<profile-basics-editor 
   profile-nick="{{profile.nick}}" 
   profile-age="{{profile.age}}">
</profile-basics-editor>

儿童element.html

properties: {
  profileNick:{
    type: String,
    notify: true
  },
  profileAge:{
    type: Number,
    notify: true
  }
}

但结果相同.主机端没有更改配置文件.

最后,我在host元素中尝试了配置文件对象初始化：

profile: {
  type: Object,
  notify: true,
  value: function(){
    return {
      age: '',
      nick: ''
    };
  }
}

然后它奏效了.

因此,在第三次阅读文档后,我想知道它是否应该像这样工作.我的意思是,我真的需要在某个时刻初始化一个对象,这样数据绑定才能起作用吗？有没有办法做到与众不同？

只是为了解释,配置文件对象没有初始化,因为它是一个注册表单,所以没有任何数据要初始化.
如果我从数据存储区接收没有某些属性的配置文件数据会怎么样,因为用户之前没有填充它们并且API不会发送空属性.这意味着我需要检查此对象是否缺少属性.这不是一种JavaScript方式.

解决方法:

双向绑定对我来说也是一个很大的挑战.
在这种情况下,我试图通过勾画变化和事件的流程来帮助自己

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'

标签：javascript,data-binding,polymer-1-0,2-way-object-databinding
来源： https://codeday.me/bug/20190711/1434331.html