首页 文章

在Nativescript布局中的嵌套转发器中访问父列表视图的索引

提问于
浏览 次
2

我有一个数组，其中包含从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 数组中的每个数组都是一个列表项，内部数组中的每个对象都将是一个转发项 . 问题是我不知道如何访问父listview项的索引，以便我可以在转发器中引用正确的数组，我可以't find in the documentation how to access the list index from with in the xml. Does anyone know if this is possible? Here'一个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 数组中包含的数组数量，每个日期下面的数据部分将从每个数组中的数据填充 .

I'm trying to achieve a separated list such as this below. Each array in the groups 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 groups array and the data sections below each date are populated from the data within each of those arrays.

javascript arrays nativescript

2 回答

  • 1

    在 NativeScript 中无法获取 Repeater 中所选 item 的索引 . 但是，一个可能的决定可能是将 id 设置为 Label 并将 tap 连接到它 . 当单击其中一个 Label 时，您可以获得其独特的 id . 我附加了此选项的示例 .

    main-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>

    main-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;
    回复于
  • 2

    由于NativeScript确实无法在嵌套转发器内部提供索引，并且基于 example of Nikolay Tsonev ，将jagged数组转换为具有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

    回复于

相关问题