javascript – 聚合物1.0 dom-repeat显示索引从1开始

前端之家收集整理的这篇文章主要介绍了javascript – 聚合物1.0 dom-repeat显示索引从1开始前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Polymer 1.0来创建购物/结账购物车.我的客户可能希望将订单发送到多个地址.在收据中,我需要列出所有带索引的地址:

地址1
约翰·多伊
1234 Main St

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

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

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

我是所有这一切的新手,所以你不能详细介绍如何使这项工作.提前谢谢你的帮助!

解决方法

您可以使用 computed binding.

而不是这个:

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

做这个:

<跨度> {{的DisplayIndex(指数)}}< /跨度>

当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>
原文链接:https://www.f2er.com/js/150986.html

猜你在找的JavaScript相关文章