访问 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 中，我试图在 <Listview> 中嵌套 <Repeater>，这样 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。我附上了这个选项的例子。

ma​​in-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>

ma​​in-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);
});

但是您还有另一个解决方案 - 您可以通过 $parents[Page].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!");

这也需要您手动将二维数组转换为更合适的形式。更多关于 $parents 这个here