了解具有嵌套元素的聚合物事件和数据绑定？

我有三个嵌套的聚合物元素。他们每个人都有默认值，可能会被发布的值覆盖。了解具有嵌套元素的聚合物事件和数据绑定？

但我做不到。

对create事件不存在发布的值。在ready事件子元素已经ready并没有更新。

在现实中，在单独的文件中的每个元素。这是例子。

Object.assign - 用于合并对象的es6方法（使用es6-shim）。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/es6-shim/0.18.0/es6-shim.js"></script> 
    <script src="http://www.polymer-project.org/components/platform/platform.js"></script> 
    <link href="http://www.polymer-project.org/components/polymer/polymer.html" rel="import"> 
</head> 
<body unresolved> 

    <polymer-element name="my-field" attributes="ask"> 
    <template> 
    <span><content></content> Message: {{message}}</span> 
    </template> 
    <script> 
    (function() { 
     Polymer('my-field', { 
     defaultAsk: { message: "Hello from Field!" }, 
     created: function() { 
      console.log('created-field', this.ask, this.message); 
      Object.assign(this, this.defaultAsk); 
     }, 
     ready: function() { 
      console.log('ready-field', this.ask, this.message); 
      Object.assign(this, this.ask); 
     } 
     }); 
    })(); 
    </script> 
    </polymer-element> 

    <polymer-element name="my-shelf" attributes="ask"> 
    <template> 
    <my-field ask="{{field}}"><content></content></my-field> 
    </template> 
    <script> 
    (function() { 
     Polymer('my-shelf', { 
     defaultAsk: { field: { message: "Hello from Shelf!" } }, 
     created: function() { 
      console.log('created-shelf', this.ask, this.field); 
      Object.assign(this, this.defaultAsk); 
     }, 
     ready: function() { 
      console.log('ready-shelf', this.ask, this.field); 
      Object.assign(this, this.ask); 
     } 
     }); 
    })(); 
    </script> 
    </polymer-element> 

    <polymer-element name="my-cabinet"> 
    <template> 
    <my-shelf ask="{{shelf}}"><content></content></my-shelf>   
    </template> 
    <script> 
    (function() { 
     Polymer('my-cabinet', { 
     ask:  { shelf: { field: { message: "Hello from outside!" } } }, 
     defaultAsk: { shelf: { field: { message: "Hello from Cabinet!" } } }, 
     created: function() { 
      console.log('created-cabinet', this.ask, this.shelf); 
      Object.assign(this, this.defaultAsk); 
     }, 
     ready: function() { 
      console.log('ready-cabinet', this.ask, this.shelf); 
      Object.assign(this, this.ask); 
     } 
     }); 
    })(); 
    </script> 
    </polymer-element> 

    <my-cabinet>Yo!</my-cabinet> 

</body> 
</html>

来源

2014-09-29 pofigizm