[英]NativeScript index in the list of Repeater items
I am trying to get and use index of the list in NativeScript, in this case using Repeater. 我试图在NativeScript中获取和使用列表的索引,在这种情况下,使用Repeater。
Here is my code: 这是我的代码:
<ScrollView>
<Repeater items="{{ sviArtikli }}" itemTemplateSelector="$index">
<Repeater.itemsLayout>
<WrapLayout orientation="horizontal"/>
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Card:CardView margin="10" width="45%" height="250" item="{{ id }}" myIndex="{{ $index }}" tap="detaljiArtikla">
<grid-layout rows="250, *" columns="*, 50">
<Image loaded="slikaUcitana" class="lista-katalozi-slika" id="slicice" opacity="1" stretch="aspectFill" colSpan="3" row="0" src="{{ 'https://url_location/' + slika_image }}" />
</grid-layout>
</Card:CardView>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
The part with myIndex="{{ $index }}"
does not work as index can not be calculated in Repeater. 带有
myIndex="{{ $index }}"
不起作用,因为无法在Repeater中计算索引。 Is there a way I can get index for every item in repeater? 有没有一种方法可以获取转发器中每个项目的索引? - ListView works, but I can not use listview in this case.
-ListView有效,但是在这种情况下我不能使用listview。
I have created a plyground for you here . 我在这里为您创建了一个plyground。 You can pass the unique ID in your dataprovider and can access in item.
您可以在数据提供者中传递唯一ID,并且可以在项中访问。
PS There is an open Feature-request
to support index in repeater, you can also cast your vote there. PS:在中继器中有一个开放的
Feature-request
以支持索引,您也可以在那里投票。
Accessing item index is not yet supported in Repeater, but if it's crucial for you, you could extend the Repeater class to support index. 在Repeater中尚不支持访问项目索引,但是如果这对您至关重要,则可以扩展Repeater类以支持索引。
indexed-repeater.ts (tested against tns-core-modules v6.0.1) indexed-repeater.ts (针对tns-core-modules v6.0.1测试)
import { Repeater } from "tns-core-modules/ui/repeater";
import { CSSType } from "tns-core-modules/ui/layouts/layout-base";
import { parse } from "tns-core-modules/ui/builder";
export module knownTemplates {
export const itemTemplate = "itemTemplate";
}
@CSSType("Repeater")
export class IndexedRepeater extends Repeater {
public refresh() {
if (this.itemsLayout) {
this.itemsLayout.removeChildren();
}
if (!this.items) {
return;
}
const length = this.items.length;
for (let i = 0; i < length; i++) {
const viewToAdd = this.itemTemplate ? parse(this.itemTemplate, this) : (<any>this)._getDefaultItemContent(i);
const dataItem = (<any>this)._getDataItem(i);
viewToAdd.bindingContext = {
item: dataItem,
index: i
};
this.itemsLayout.addChild(viewToAdd);
}
(<any>this)._isDirty = false;
}
}
Sample Usage 样品用量
<ScrollView xmlns:comps="components/indexed-repeater">
<comps:IndexedRepeater items="{{ items }}">
<comps:IndexedRepeater.itemTemplate>
<Label text="{{ index + ' ' + item.name }}" class="m-10 h3" />
</comps:IndexedRepeater.itemTemplate>
</comps:IndexedRepeater>
</ScrollView>
Hi guys thanks and it helped. 大家好,谢谢。 What I did, without changing any code base is pushing locally generated ID's into JSON element and used them for indexes.
我所做的在不更改任何代码库的情况下将本地生成的ID推送到JSON元素中并将其用于索引。 Now json has { "my_index": "0" ..... } which I change in for loop when fetch is over.
现在json具有{“ my_index”:“ 0” .....},当提取结束时,我会在for循环中进行更改。 I am using those indexes just to scroll the view on certain element in the list.
我使用这些索引只是为了在列表中的某些元素上滚动视图。
http.getJSON("https://....")
.then(function (response){
for(var i = 0; i < response.length; i++) {
response[i].my_index = i; // change response on the fly.
// do something with response....
}
}, function(error) {
console.error(JSON.stringify(error));
})
I guess this could help to someone as well. 我想这也可能对某人有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.