javascript - 如何利用polymer 给模板中的元素附上自定义属性？

Question

<dom-module id="geo-comtoolbar">
    <template>
        <ul class="toolBarWrap" id="toolWrap">
            <template is='dom-repeat' items={{toolName}}>
                <li tooltype='{{item.tooltype}}'>
                    <img src="{{item.imgUrl}}">
                    <span>{{item.tName}}</span>
                </li>
            </template>
        </ul>
    </template>
</dom-module>

<script type="text/javascript">
    Polymer({
        is: 'geo-comtoolbar',

        ready: function (){
            this.toolName = [
                {tName: '平移', imgUrl: 'imgs/maptool/drag.png', tooltype: 'pan'},
                {tName: '距离', imgUrl: 'imgs/maptool/distance.png', tooltype: 'calLen'},
                {tName: '面积', imgUrl: 'imgs/maptool/area.png', tooltype: 'calArea'}
            ];

        },    
    });
</script>

刚研究polymer，为每个li绑定tooltype属性，用{{item.tooltype}}解析不了。是不是可以用其他的方式？

Answer 1

我是把repeat item也定义成组件了。

<template is="dom-repeat" items="{{testItems}}">
    <performance-item item="{{item}}"></performance-item>
</template>

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="performance-item">
    <template>
        <li>
            <p>
                <label>{{item.field}}</label>
                <input type="text" value="{{item.field::input}}" style="width:80px">
            </p>
       </li>
    </template>
    <script>
        Polymer({
            is: "performance-item",
            properties:{
                item:{
                    value: null,
                    type: "object"
                }
            }
        });
    </script>
</dom-module>

题主有兴趣，可以看下我写的polymer几篇专栏，虽然都比较浅