NativeScript - tablica w widoku listy

Question

Jestem nowy w NS i próbuję wyświetlić listę pasażerów na liście przejazdów (każda z nich ma wielu pasażerów).

Więc próbowałem umieścić listview (pasażerów) wewnątrz globalnego listview (przejażdżki), listview dla pracy na przejażdżkach, ale nie dla pasażera (oczywiście), nie sądzę, że jest to właściwy sposób, aby to zrobić.

tutaj jest mój kod:

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

Dzięki!

Answer 1

więc znalazłem rozwiązanie, użyj repeater, nie zapominając zawierać globalny układ po Repeater (GridLayout tutaj)

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>