NativeScript - tableau dans listview

Question

Je suis nouveau à NS et j'essaye d'afficher une liste de passagers dans une liste de tours (chaque tour a beaucoup de passagers).

donc j'ai essayé de mettre un listview (passagers) à l'intérieur d'un listview global (manèges), le listview pour les manèges fonctionnent, mais pas pour le passager (évidemment), je ne pense pas que ce soit la bonne façon de le faire.

voici mon code:

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

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

Merci!

Answer 1

donc j'ai trouvé la solution, utilisez repeater, sans oublier d'inclure une disposition globale après le répéteur (GridLayout ici)

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>