3

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

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

我是否遗漏了什么或者 Polymer 还不支持这种绑定？我正在使用带有 Chrome 27.0.1453.93 的 Polymer commit d14278cfceb87f68b2d0241ec704c6a646f246bf。

索引.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>
4

1 回答 1

3

这里的问题是 Polymer 不知道如何在#inputArea的模型和实例之间设置两种方式的变化<color-pallet>。该.model物业是最近<template>在 MDV 中的新增功能。

编辑：这实际上是由于<color-pallet>在 MDV 尝试在模板中绑定到它之前元素定义不可用引起的。这是自定义元素 polyfill 的一个限制，我们可能会在原生实现准备好之前尝试减轻影响。

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

document.addEventListener('WebComponentsReady', function() {
  t.model = model;
});
于 2013-05-29T18:59:24.207 回答