从dom-重复访问元素的属性
我在元素中使用了一个dom-repeat模板，我希望在新元素(<media-element>)中使用该元素的属性typeElement (<custom-element>)。
<dom-module id="custom-element">
<template>
<template is="dom-repeat" items="{{array}}" as="file">
<media-element some-prop="{{typeElement}}" file="{{file}}"></media-element>
</template>
</template>
<script>
Polymer({
is: 'custom-element',
properties: {
typeElement: Number,
array: {
type: Array,
value: function() { return[]; }
}
}
});
</script>
</dom-module>我怎么能这么做？
回答 3
Stack Overflow用户
发布于 2017-02-28 08:24:11
好吧，我自己想，问题不在这里。问题在于子元素(<media-element>)。因此，我将发布一个新的问题来解决这个问题：
如何在元素创建之前初始化元素的属性？或者，如果在属性更改/init之后回忆我的条件函数，如何触发dom？
我的代码：
<dom-module id="media-element">
<template>
<template is="dom-if" if="[[isType(0)]]">
....
</template>
</template>
<script>
Polymer({
is: 'media-element',
properties: {
myType: {
type: Number,
value: 0
}
},
isType: function(t){return (this.myType===t);}
});
</script>
</dom-module>更新:我发送了我的问题，并收到了古德的答复：这里
Stack Overflow用户
发布于 2017-02-27 12:38:35
我不知道你所说的“使用财产”是什么意思，所以我在下面做假设。
假设要将<media-element>.someProp设置为<custom-element>.typeElement的值，则数据绑定是正确的。每当typeElement的值发生变化时，someProp将被设置为相同的值。您可以使用<media-element>使用this.someProp访问方法中的值。示例：
<dom-module id="media-element">
<template>...</template>
<script>
Polymer({
is: 'media-element',
properties: {
someProp: Number
},
foo: function() {
console.log(this.someProp);
}
});
</script>
</dom-module>假设还希望对<media-element>.someProp的更改更新<custom-element>.typeElement，则需要在someProp的属性声明中设置notify: true
// media-element
properties: {
someProp: {
type: Number,
notify: true // <-- only needed for upward notifications (two-way data binding and observers)
}
}
HTMLImports.whenReady(() => {
Polymer({
is: 'custom-element',
properties: {
typeElement: {
type: Number,
value: 100,
observer: '_typeElementChanged'
}
},
_typeElementChanged: function(typeElement) {
console.log('new typeElement', typeElement);
}
});
Polymer({
is: 'media-element',
properties: {
someProp: {
type: Number,
notify: true
}
},
_logSomeProp: function() {
console.log('someProp', this.someProp);
},
_incrementSomeProp: function() {
this.someProp++;
}
});
});<head>
<base href="https://polygit.org/polymer+1.8.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<custom-element></custom-element>
<dom-module id="custom-element">
<template>
<media-element some-prop="{{typeElement}}"></media-element>
</template>
</dom-module>
<dom-module id="media-element">
<template>
<button on-tap="_logSomeProp">Log someProp</button>
<button on-tap="_incrementSomeProp">Incremeent someProp</button>
</template>
</dom-module>
</body>
码页
我建议阅读https://www.polymer-project.org/1.0/docs/devguide/data-binding。
Stack Overflow用户
发布于 2017-02-27 12:28:14
因为设置属性(如：typeElement: Number )无法工作。您必须像定义array属性一样定义它。因此：
typeElement: {
type: Number,
value: Number,
}我不知道你想要什么价值。在这之后，它应该可以工作。
https://stackoverflow.com/questions/42484783
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号