2016-06-07 1 views
2

У меня есть массив, содержащий несколько массивов объектов с ним, которые возвращаются из веб-службы, позволяет называть его var groups. На мой взгляд, модель - это наблюдаемый массив.Доступ к индексу родительского списка в вложенном ретрансляторе в макете Nativescript

var groups = [ 
       [{year:"1986", key2: "foo2"}, {year:"1986", key2:"blah"}], 
       [{year:"1987", key2: "baz"}, {year:"1987", key2:"beek"}], 
       [{year:"1988", key2: "baz"}, {year:"1988", key2:"beek"}] 
      ] 

В моей XML Я пытаюсь гнездо <Repeater> с в <Listview> таким образом, что каждый массив в groups массиве будет элемент списка, и каждый объект во внутренних массивах будет элементом повторителя. Проблема в том, что я не знаю, как получить доступ к индексу родительских элементов списка, чтобы я мог ссылаться на правильный массив в ретрансляторе, и я не могу найти в документации, как получить доступ к индексу списка из с в xml. Кто-нибудь знает возможно ли это? Вот пример XML-заметки ??? в итераторе повторителей .... Что я могу там положить?

<Listview items="{{ Groups }}"> 
    <ListView.itemTemplate> 
     /* Some other layout content */ 
     <Repeater items="{{ Groups[parent.index] ??? }}"> 
     <Repeater.itemTemplate> 
     /* the contents of each groups array should display here */ 
     </Repeater.itemTemplate> 
     </Repeater> 
    </ListView.itemTemplate> 
</Listview> 

EDIT: Просто чтобы сделать его более ясным, я в основном просто хочу знать, как получить доступ к индексу представления списка Родитель ретрансляторов item атрибут. Это позволит мне отображать правильные данные в элементе ретранслятора.

Я пытаюсь достичь разделенного списка, такого как это ниже. Каждый массив массива groups представляет собой кусок данных с той же датой. Таким образом, строки представления списка (даты) основаны на количестве массивов, содержащихся в массиве groups, а разделы данных ниже каждой даты заполняются из данных в каждом из этих массивов.

I'm trying to achieve a separated list such as this below. Each array in the <code>groups</code> array is a chunk of data with the same date. So the list view rows (dates) are based on the number of arrays contained in the <code>groups</code> array and the data sections below each date are populated from the data within each of those arrays.

+0

Существует плагин для секционных списков-просмотров.однако даже с этим плагином вам все равно придется нормализовать способ предоставления ваших данных, чтобы избежать поиска вложенного индекса https://www.npmjs.com/package/nativescript-sectioned-list-view –

+0

Да, к сожалению, этот плагин не смотрит на поддержку Android. –

ответ

2

В NativeScript не представляется возможным, чтобы получить индекс выбранного item в Repeater. Однако одним из возможных решений может быть установка уникального id, например, до Label и для присоединения к нему tap. Когда один из Label был нажат, вы можете получить его уникальный id. Я прилагаю пример для этой опции.

основного page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded"> 
     <ListView id="listview" items="{{ myItems }}" itemTap="listViewItemTap"> 
      <ListView.itemTemplate> 
       <StackLayout> 

        <Repeater items="{{ myItem2 }}" > 
        <Repeater.itemsLayout> 
         <WrapLayout /> 
        </Repeater.itemsLayout> 
        <Repeater.itemTemplate> 
         <Label text="{{ $value.item }}" id="{{$value.key}}" margin="10" onTap="test"/> 
        </Repeater.itemTemplate> 
        </Repeater> 
       </StackLayout> 
      </ListView.itemTemplate> 
     </ListView> 
</Page> 

основные-page.js

var observable_array_1 = require("data/observable-array"); 
function onPageLoaded(args) { 
    var page = args.object; 
    var array = new observable_array_1.ObservableArray(); 
    var listView = page.getViewById('listview'); 
    array.push({ myItem2: [{ item: "test1", key: "1" }, { item: "test1", key: 'j' }, { item: "test1", key: "3" }] }); 
    array.push({ myItem2: [{ item: "test6", key: "6" }, { item: "test4", key: "4" }, { item: "test5", key: "5" }] }); 
    page.bindingContext = { myItems: array }; 

} 
exports.onPageLoaded = onPageLoaded; 
function listViewItemTap(args) { 
    var itemIndex = args.index; 
    var object = args.object; 
    console.log(itemIndex); 
} 
exports.listViewItemTap = listViewItemTap; 
function test(args) { 
    console.log(args.object.get('id')); 
} 
exports.test = test; 
+0

В моем случае использования элементы в ретрансляторе не должны использоваться пользователем. Единственной причиной, по которой мне нужен индекс родительского элемента Listview, является то, что я могу отображать объекты, содержащиеся в массивах групп. Позволит ли этот метод? –

+0

Я сделал некоторые дополнительные изменения, чтобы надеяться сделать вопрос немного более понятным. –

+0

В моем примере проекта все группы массивов были отображены в «ListView» в том же порядке, что и в «ObservableArray». На мой взгляд, мое решение решит вашу проблему с отображением данных. –

1

В NativeScript на самом деле не может обеспечить индексации внутри вложенного повторителя, и на основе примера Николай Цонев будет намного проще просто преобразовать ваш зубчатый массив в массив с объектами JSON. Вот что вам нужно сделать для this code для работы с вашим массивом.

var groups = [ 
     [{year:"1986", key2: "foo2"}, {year:"1986", key2:"blah"}], 
     [{year:"1987", key2: "baz"}, {year:"1987", key2:"beek"}], 
     [{year:"1988", key2: "baz"}, {year:"1988", key2:"beek"}] 
]; 

var resultArray = new ObservableArray(); 

groups.forEach(subgroup => { 
    var jsonArg1 = new Object(); 
    jsonArg1["myItem2"] = subgroup; 
    resultArray.push(jsonArg1); 
}); 

Однако у вас есть и другое решение - вы можете предоставить полностью Diffferent источник привязки к вашему вложенному повторителю через $ родители [Страница] .someDataModel Например:

// page.xml 
<ListView items="{{ items }}"> 
    <ListView.itemTemplate> 
     <StackLayout> 
      <Label text="{{ $value }}" /> 
      <TextField text="{{ $parents['ListView'].test, $parents['ListView'].test }}" /> 
     </StackLayout> 
    </ListView.itemTemplate> 
</ListView> 

// page.js 
viewModel.set("items", [1, 2, 3]); 
viewModel.set("test", "Test for parent binding!"); 

Это и потребуют для вы вручную конвертируете двумерный массив в нечто более подходящее. Подробнее о $ parentshere

+0

Итак, в вашем первом примере каждый массив в массиве 'groups' станет объектом? В этом случае массив групп будет содержать три объекта, и тогда эти объекты будут содержать их текущее содержимое? Я также добавил изображение того, что я пытаюсь выполнить. –

Смежные вопросы