Question

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

主机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
  }
}

问题是当我更改输入值时，主机元素上的profile属性不会更新。但是，它在子元素内更新。但没有什么可以摆脱它。

我还尝试了在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
  }
}

但结果相同。 Profile在主机方面没有改变。

最后，我在host元素中尝试了profile对象初始化：

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

然后它奏效了。

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

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

Answer 1

双向绑定对我来说也是一个挑战。在这种情况下，我试图通过草拟变化和事件的流程来帮助自己

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'

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

1 个答案: