gpt4 book ai didi

javascript - 无法绑定(bind)到放置在模板内的自定义元素的属性

转载 作者:可可西里 更新时间:2023-11-01 13:13:00 26 4
gpt4 key购买 nike

我最近一直在试用 Polymer,并编写了以下示例。问题是,如果我尝试将自定义元素放入模板中,绑定(bind)将无法按预期工作。

我想移动颜色托盘内的 slider 并更改名称的颜色,但更改对颜色没有任何影响。如果我将 slider 直接放在模板内,它会按预期工作。

我是不是遗漏了什么或者 Polymer 还不支持这种绑定(bind)?我在 Chrome 27.0.1453.93 中使用 Polymer commit d14278cfceb87f68b2d0241ec704c6a646f246bf。

index.html

<html>
<head>
<script src="polymer/polymer.js" ></script>
<link rel="import" href="color-pallet.html">
</head>
<body>
<template id="inputArea" repeat="{{animals}}">
<div>
<p>
<strong><span style="color: rgb({{color.red}},{{color.green}},{{color.blue}})">{{name}}</span></strong>
</p>
<input type="text" value="{{name}}" placeholder="Your name here">
<!-- The following works -->
<ul>
<li>r<input type="range" min="0" max="255" value="{{color.red}}"><input readonly type="text" value="{{color.red}}"></li>
<li>g<input type="range" min="0" max="255" value="{{color.green}}"><input readonly type="text" value="{{color.green}}"></li>
<li>b<input type="range" min="0" max="255" value="{{color.blue}}"><input readonly type="text" value="{{color.blue}}"></li>
</ul>
<!-- The following doesn't work -->
<!-- <color-pallet red="{{color.red}}" green="{{color.green}}" blue="{{color.blue}}"></color-pallet> -->
</div>
</template>
<script>
var t = document.getElementById('inputArea');
var model = {
animals: [
{
name: "Giraffe",
color: {
red: 255,
green: 255,
blue: 0
}
},
{
name: "Aardvark",
color: {
red: 255,
green: 0,
blue: 0
}
}]
};
t.model = model;
</script>
</body>
</html>

color-pallet.html

<element name="color-pallet" attributes="red green blue">
<template>
<ul>
<li><input type="range" min="0" max="255" value="{{red}}"><input readonly type="text" value="{{red}}"></li>
<li><input type="range" min="0" max="255" value="{{green}}"><input readonly type="text" value="{{green}}"></li>
<li><input type="range" min="0" max="255" value="{{blue}}"><input readonly type="text" value="{{blue}}"></li>
</ul>
</template>
<script>
Polymer.register(this, {
red: 0,
green: 0,
blue: 0
});
</script>
</element>

最佳答案

这里的问题是 Polymer 不知道如何设置 #inputArea 之间的两种方式变化。 <color-pallet> 的模型和实例. .model属性是 <template> 的半新添加项在 MDV 中。

编辑: 这实际上是由 <color-pallet> 引起的在 MDV 尝试在模板中绑定(bind)到它之前,元素定义不可用。这是自定义元素 polyfill 的一个限制,我们可能会尝试在 native 实现准备就绪之前减轻影响。

如果将模型分配包装在“WebComponentsReady”事件的处理程序中,这将按预期工作。

document.addEventListener('WebComponentsReady', function() {
t.model = model;
});

关于javascript - 无法绑定(bind)到放置在模板内的自定义元素的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16817409/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com