3

私は最近Polymerを試していて、次のサンプルを書きました。問題は、カスタム要素をテンプレート内に配置しようとすると、バインドが意図したとおりに機能しないことです。

カラーパレット内のスライダーを動かして名前の色を変更したいのですが、変更しても色に影響はありません。スライダーをテンプレート内に直接配置すると、意図したとおりに機能します。

何か不足していますか、それとも Polymer はまだこの種のバインディングをサポートしていませんか? 私は、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>
4

1 に答える 1