NativeScript - 列表视图中的数组答案

【问题标题】：NativeScript - array in listviewNativeScript - 列表视图中的数组
【发布时间】：2018-02-17 04:27:16
【问题描述】：

我是 NS 的新手，我正在尝试在游乐设施列表中显示乘客列表（每个游乐设施都有很多乘客）。

所以我试图将一个列表视图（乘客）放在一个全局列表视图（游乐设施）中，游乐设施的列表视图对乘客有效，但对乘客无效（显然），我认为这不是正确的做法。

这是我的代码：

rides.xml：

    <ListView items="{{ ridesList }}" id="ridesList">
  <ListView.itemTemplate>
    <!-- Rides -->
    <StackLayout class="box" orientation="vertical">
      <GridLayout class="boxHeader" rows="auto" columns="*">
        <Label class="title" verticalAlignment="center" horizontalAlignment="left" text="{{reference}}" />
      </GridLayout>
      <StackLayout class="boxContent" orientation="vertical">
        <GridLayout class="checkpoints" rows="auto, auto" columns="80, *, 60">
          <!-- -->
          <ListView items="{{ passagers }}" id="passagersList">
            <ListView.itemTemplate>
                <StackLayout class="timedate" orientation="vertical" row="0" col="0">
                  <Label class="time" text="14:32" />
                  <Label class="firstname" text="{{firstname}}" />
                </StackLayout>
                [...]
              </ListView.itemTemplate>
            </ListView>
        </GridLayout>
      </StackLayout>
    </StackLayout>
    <!-- /Rides -->
  </ListView.itemTemplate>
</ListView>

rides.js

    var ride = new RideViewModel([]);
[...]
exports.loaded = function(args) {
    var page = args.object;
        page.bindingContext = ride;

            ride.futurCourse().then(function(data) {
                                [...]

                                ride.fillFuturCourse(data);
            });
};

ride-view-model.js

viewModel.fillFuturCourse = function(data){

  var testdModel = new ObservableArray();
  var jsone = JSON.parse('{"course":[{"id":"5","reference":"test","passagers":[{"firstname":"julien"},{"firstname":"andre"}]},{"id":"6","reference":"RF7878788"}]}');
  testdModel= jsone.course;
  viewModel.set("ridesList",testdModel);
};

谢谢！

【问题讨论】：

标签： javascript listview nativescript

【解决方案1】：

所以我找到了解决方案，使用 repeater ，不要忘记在转发器之后包含全局布局（此处为 gridlayout）

rides.xml：

    <ListView items="{{ ridesList }}" id="ridesList">
  <ListView.itemTemplate>
    <!-- Rides -->
    <StackLayout class="box" orientation="vertical">
      <GridLayout class="boxHeader" rows="auto" columns="*">
        <Label class="title" verticalAlignment="center" horizontalAlignment="left" text="{{reference}}" />
      </GridLayout>
      <StackLayout class="boxContent" orientation="vertical">
        <GridLayout class="checkpoints" rows="auto, auto" columns="80, *, 60">
          <!-- -->
        <Repeater items="{{ passagers }}">
            <Repeater.itemTemplate>
                <GridLayout class="checkpoints" rows="auto, auto" columns="80, *, 60">
                       <StackLayout class="timedate" orientation="vertical" row="0" col="0">
                          <Label class="time" text="14:32" />
                          <Label class="firstname" text="{{firstname}}" />
                          </StackLayout>
                          [...]
                </GridLayout>
            </Repeater.itemTemplate>
        </Repeater>
        </GridLayout>
      </StackLayout>
    </StackLayout>
    <!-- /Rides -->
  </ListView.itemTemplate>
</ListView>

【讨论】：