假设我有两个截然不同的 polymer-elements
一个应该使用content占位符嵌入另一个内部.是否有可能在这两个嵌套之间进行数据绑定polymer-elements？
我试过了,但我无法让它工作:http://jsbin.com/IVodePuS/11/
根据http://www.polymer-project.org/articles/communication.html#bindingpolymer-elements应该工作之间的数据绑定(在这些示例中,它们是在template标记内完成而不使用content占位符).
斯科特迈尔斯澄清说,数据绑定只适用于该template级别.
但是在我的情况下,我template事先并不知道确切的但是我想允许我的用户parent-element指定child-element它应该包含哪些(假设有不同的child-elements.
我认为这个问题与这个问题有关:使用在光dom中定义的模板在Polymer元素中
我更新了以下示例以突出显示他:
<polymer-element name="parent-element" >
<template >
<div>Parent data: {{data1}} </div>
<content />
</template>
<script>
Polymer('parent-element', {
data1 : '',
ready: function() {
this.data='parent content';
}
});
</script>
</polymer-element>
<polymer-element name="child-element" attributes="data2">
<template>
<div>Parent data: {{data2}} </div>
</template>
<script>
Polymer('child-element', {
data2 : '',
ready: function() { …我正在尝试将模板从DOM移动到元素内部.
这是我的要素:
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
<polymer-element name="bt-sortable-list" attributes="drag name list">
<template>
BOOM
<template binding ref="itemTemplate" repeat="{{list}}" id="repeatTemplate">
</template>
<template id="itemTemplate">
</template>
</template>
<script>
Polymer('bt-sortable-list', {
ready: function() {
var div = document.createElement('div');
contentStr = this.trim(innerHTML);
var parsed = markdown.toHTML(content);
this.$.itemTemplate.innerHTML = parsed;
this.list = [{name: 'Item 1', id: 'item1'}, {name: 'Item 2', id: 'item2'}, {name: 'Item 3', id: 'item3'}];
this.$.repeatTemplate.model = this.list;
}
});
</script>
</polymer-element>
这是我的html文件:
<!doctype html>
<html>
<head>
<script src="/platform/platform.js"></script>
<link rel="import" href="/bt-sortable-list/bt-sortable-list.html">
</head> …我刚刚开始学习聚合物.这是我的聚合物元素的通用版本:
<polymer-element name="my-element">
<template>
<style>
:host {
position:absolute;
width: 200px;
height: 100px;
background-color: green;
}
</style>
<p>my element</p>
<content id="first-in"></content>
<content id="second-in"></content>
</template>
<script>
Polymer('my-element', {
domReady: function() {
alert(this.children[0].getAttribute('title'));
//this returns the value I want to observe
}
});
</script>
<polymer-element>
内容标记都填充了另一个自定义元素(再次略微简化):
<polymer-element name="in-element" attributes="title">
<template>
<style>
...
</style>
<p>{{title}}</p>
</template>
<script>
Polymer('in-element', {
title: 'me'
});
</script>
<polymer-element>
我希望能够做的是当(任何)元素(放入内容标记中)中的title属性发生更改时(通过单击事件或其他任何内容)调用my元素中的函数.我不知道如何使用观察或如果我需要使用mutationObserver等来访问它.如何完成/是否可能？