4

I'm new to NS and i'm trying to display a list of passengers inside a list of rides ( each ride has many passengers).

So i tried to put a listview (passengers) inside a global listview ( rides ), the listview for the rides work but not for the passenger (obviously), i don't think it's the right way to do it.

here is my 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);
            });
};

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

Thanks !

1 Answer 1

1

So i found the solution, use repeater , without forgetting to include a global layout after the 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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.