Question

我最近一直在尝试使用Polymer，并编写了以下示例。问题是，如果我尝试将自定义元素放在模板中，则绑定不会按预期工作。

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

我错过了什么或者聚合物还不支持这种绑定吗？我正在使用Polymer commit d14278cfceb87f68b2d0241ec704c6a646f246bf和Chrome 27.0.1453.93。

的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>

色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>

Answer 1

~~这里的问题是Polymer不知道如何在#inputArea的模型和<color-pallet>的实例之间设置双向更改。 .model属性是MDV中<template>的半新近属性。~~

编辑：这实际上是由于在MDV尝试在模板中绑定它之前<color-pallet>元素定义不可用而导致的。这是Custom Elements polyfill的限制，我们可能会尝试在本机实现准备就绪之前减轻这些影响。

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

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

无法绑定到放置在模板中的自定义元素的属性

的index.html

色pallet.html

1 个答案: