javascript – NativeScript – listview中的数组

2023年4月5日 192次阅读

我是NS的新手,我试图在一系列乘车中显示乘客列表(每次乘坐都有很多乘客).

所以我试图将listview(乘客)放在全球列表视图(乘坐)中,乘坐的列表视图工作但不是乘客(显然),我不认为这是正确的方法.

这是我的代码：

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);
            });
};

骑 – 视图 – 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);
};

谢谢 ！

最佳答案 所以我找到了解决方案,使用
repeater,而不忘记在转发器之后包含全局布局(gridlayout here)

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>
点赞