ListView.itemTemplate e immagini in NativeScript

Question

Sto provando a creare un elenco di contatti di tipo POC per NativeScript. E mi piacerebbe avere un'immagine e un nome in una voce di elenco. Il codice che sto usando per il layout è la seguente

<Page loaded="pageLoaded"> 
    <ListView items="{{ myItems }}"> 
     <ListView.itemTemplate> 
      <Image src="{{ imageSrc }}" /> 
      <Label text="{{ title }}" /> 
     </ListView.itemTemplate> 
    </ListView> 
</Page> 

A quanto pare, il valore del titolo è in arrivo bene, ma l'immagine non viene visualizzata a tutti. Quando provo a inserire lo stesso codice immagine in una pagina vuota, NativeScript crea la pagina con l'immagine.

Qualcuno può dirmi perché l'immagine non viene visualizzata nel modello listview? E come può essere visualizzato?

Grazie

Answer 1

Ho provato questo; Devi mettere gli oggetti interni in un layout. Credo che l'itemTemplate possa essere UN SOLO figlio. Tutti i miei test sembrano indicare che itemTemplate punta a un singolo figlio.

Quindi questo funziona correttamente poiché il figlio singolo è uno StackLayout che contiene quindi i due elementi.

XML:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded"> 
     <ListView id="listview" items="{{ myItems }}"> 
      <ListView.itemTemplate> 
       <StackLayout orientation="horizontal"> 
       <Label text="{{ title }}" /> 
       <Image src="{{ src }}" stretch="none" /> 
       </StackLayout> 
      </ListView.itemTemplate> 
     </ListView> 
</Page> 

Per il completamento del codice (per tutti coloro che guardando questo in futuro) le JS più semplici:

var observableArray = require("data/observable-array"); 
function onPageLoaded(args) { 
    var page = args.object; 
    var array = new observableArray.ObservableArray(); 

    array.push({title: "Title1", src: 'http://master-technology.com/images/Logo1.gif')}); 
    array.push({title: "Title2", src: 'http://master-technology.com/images/demos/Apps-TurnItOffLogo.gif')}); 

    page.bindingContext = {myItems: array}; 
} 
exports.onPageLoaded = onPageLoaded;