在Nativescript佈局中訪問嵌套中繼器中父列表視圖的索引

Question

我有一個數組，其中包含從Web服務返回的其中包含多個對象的數組，我們稱其爲var groups。在我的視圖模型中，它是一個可觀察的數組。

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> 

編輯：只是爲了更清楚，我基本上只是想知道如何從中繼器訪問父列表視圖索引item屬性。這將允許我在轉發器元素中顯示正確的數據。

我正試圖實現如下所示的分隔列表。 groups數組中的每個數組都是一個具有相同日期的數據塊。因此，列表視圖行（日期）基於groups數組中包含的數組的數量，並且每個日期下面的數據部分都是從每個數組內的數據填充的。

Answer 1

在NativeScript是不可能Repeater獲取所選item的指數。然而，一個可能的決定可能是將唯一的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; 

Answer 2

如NativeScript確實不能提供嵌套中繼器內的索引和基於所述示例Nikolay Tsonev只需將鋸齒陣列轉換爲帶有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); 
}); 

然而，你也有另一種解決方案 - 您可以通過$家長[頁] .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!"); 

這也將要求你手動將你的二維數組轉換成更適合的形式。更多關於$父母這here