我正在使用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>
