Polymer 1.0 dom-repeat 显示索引从 1 开始答案

【问题标题】：Polymer 1.0 dom-repeat display index starting at 1Polymer 1.0 dom-repeat 显示索引从 1 开始
【发布时间】：2015-10-01 23:52:55
【问题描述】：

我正在使用 Polymer 1.0 创建购物车/结账车。我有客户可能希望将他们的订单运送到多个地址。在收据中，我需要列出所有带有索引的地址：

地址 1
约翰·多伊
主街 1234 号
...

地址 2
简·史密斯
999 百老汇
...

如何让索引从 1 而不是 0 开始？

    <template is="dom-repeat" items="{{shipping_details}}" as="address">
        <div>Address <span>{{index}}</span></div>
        <div>{{address.name}}</div>
        <div>{{address.line1}}</div>
    </template>

这是我实际代码的简化，但原理是一样的。我试图制作一个将索引作为参数并将innerHTML设置为index++的js函数，但我不知道它应该触发什么事件或如何让它调用该函数。

    <div>Address <span on-some-event="displayIndex(index)"></span></div>

我对这一切都是新手，所以你不能详细介绍如何使这项工作发挥作用。提前感谢您的帮助！

【问题讨论】：

标签： javascript html data-binding polymer-1.0

【解决方案1】：

您可以为此使用computed binding。

不是这个：

<span on-some-event="displayIndex(index)"></span>

这样做：

<span>{{displayIndex(index)}}</span>

当displayIndex是这个时：

function (index) {
    return index + 1;
}

注意： displayIndex可以

元素原型的方法

<dom-module id="cart-addresses">
    <template is="dom-repeat" items="{{shipping_details}}" as="address">
        <div>Address <span>{{displayIndex(index)}}</span></div>
        <div>{{address.name}}</div>
        <div>{{address.line1}}</div>
    </template>
    <script>
        Polymer({
            is: 'cart-addresses',
            ...
            displayIndex: function(index) {
                return index + 1;
            }
            ...
        });
    </script>
</dom-module>

附加到自动绑定模板的方法

    <template is="dom-bind">
        ...             
        <template is="dom-repeat" items="{{shipping_details}}" as="address">
            <div>Address <span>{{displayIndex(index)}}</span></div>
            <div>{{address.name}}</div>
            <div>{{address.line1}}</div>
        </template>
    </template>
    <script>
        var template = document.querySelector('template[is="dom-bind"]');

        ...

        template.displayIndex = function (index) {
            return index + 1;
        };
    </script>

【讨论】：