2017-08-23 1 views
1

Je suis nouveau à Nativescript et j'essaie d'utiliser ListView avec vanilla javascript. J'ai une erreur bizarre où la sortie dans ListViews montre comme [object Object] au lieu d'une valeur réelle.Nativescript ListView [objet objet]

réponse JSON

[ 
    { 
     passenger: "John Doe", 
     category: "Arrival" 
    }, 
    { 
     passenger: "Martin Schulz", 
     category: "Departure" 
    }, 
    { 
     passenger: "Giovanni Marocco", 
     category: "Arrival" 
    } 
] 

contrôleur

var view = require("ui/core/view"); 
var http = require("http"); 

exports.pageLoaded = function(args) { 
    var page = args.object; 

    http.getJSON("http://demo4727937.mockable.io/test").then(function (r) { 
     page.bindingContext = { 
      'myItems': r 
     } 
    }, function (e) { 
     //// Argument (e) is Error! 
    }); 

}; 

modèle

<Page loaded="pageLoaded"> 
    <StackLayout> 
     <ListView items="{{ myItems }}"> 
      <ListView.itemTemplate height="50"> 
       <Label text="{{passenger}}" textWrap="true" class="title" /> 
       <Label text="{{category}}" textWrap="true" class="title" /> 
      </ListView.itemTemplate> 
     </ListView> 
    </StackLayout> 
</Page> 

Résultat
enter image description here

+2

vous devez envelopper vos étiquettes dans un conteneur par exemple

+1

merci @OseiFortune, ça marche. S'il vous plaît envisager d'afficher ceci comme une réponse afin que je puisse l'accepter – intelis

Répondre

1

Le problème ici est que vous devez vous envelopper modèle dans un conteneur de vue, par exemple stackLayout ou même un GridLayout

<Page loaded="pageLoaded"> 
    <StackLayout> 
     <ListView items="{{ myItems }}"> 
      <ListView.itemTemplate height="50"> 
       <StackLayout> 
        <Label text="{{passenger}}" textWrap="true" class="title" /> 
        <Label text="{{category}}" textWrap="true" class="title" /> 
       </StackLayout> 
      </ListView.itemTemplate> 
     </ListView> 
    </StackLayout> 
</Page>