[英]Understanding Polymer events and data-bindings with nested elements?
I have three nested polymer elements. 我有三个嵌套的聚合物元素。 Each of them has default values, which may be overridden with published value.
它们每个都有默认值,这些默认值可能会被发布的值覆盖。
But i can't do it. 但是我做不到。
On create
event does not exist published value. create
事件不存在已发布的值。 On ready
event child element has already ready
and not updated. 在
ready
事件中,子元素已ready
,尚未更新。
I made example js-bin. 我做了示例js-bin。
In reality, each element in the separate file. 实际上,每个元素都在单独的文件中。 It is example.
这是一个例子。
Object.assign - es6 method for merging objects (use es6-shim). 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>
All will working as I want, if use only one object through many nested elements. 如果仅通过多个嵌套元素使用一个对象 ,那么一切都会按我的意愿工作。
All my element extended of other one (my-elem) only for remove doubled code and make my example more readable. 我所有其他元素的扩展(my-elem)仅用于删除加倍的代码并使我的示例更具可读性。
ask
- binding data (from my-cabinet to my-field). ask
绑定数据(从my-cabinet到my-field)。 Click
- changing data. Click
-更改数据。
Unfortunately, on jsbin wery uneasy console for view fired messages. 不幸的是,在jsbin上,wery不方便的控制台用于查看触发的消息。
I made small schema of chain events with nested elements. 我用嵌套元素制作了链式事件的小模式。 Maybe, it will help someone.
也许会帮助某人。
ps Don't kick me for my bad english. ps不要因为我的英语不好而踢我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.