Polymer 1.0 dom-从1开始重复显示索引

Question

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

地址 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>

我对这一切都不熟悉，所以您不能详细介绍如何进行这项工作。预先感谢您的帮助！

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

Polymer 1.0 dom-从1开始重复显示索引

Polymer 1.0 dom-repeat display index starting at 1

html

javascript

data-binding

polymer-1.0