ListView.itemTemplate i obrazy w języku NativeScript

Question

Próbuję utworzyć listę POC listy kontaktów dla NativeScript. Chciałbym mieć obraz i nazwę w elemencie listy. Kod, który używam dla układu jest następujący

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

Najwyraźniej wartość tytuł będzie się dobrze, ale obraz nie jest wyświetlany w ogóle. Kiedy próbuję umieścić ten sam kod obrazu na pustej stronie, NativeScript tworzy stronę z obrazem.

Czy ktoś może mi powiedzieć, dlaczego obraz nie pojawia się w szablonie listy? I jak może być wyświetlany?

Dzięki

Answer 1

Przetestowałem to; Musisz umieścić elementy wewnętrzne w układzie. Wierzę, że itemTemplate może być JEDNYM dzieckiem. Wszystkie moje testy zdają się wskazywać, że itemTemplate wskazuje na jedno dziecko.

To działa dobrze, ponieważ pojedyncze dziecko to StackLayout, które zawiera następnie dwa przedmioty.

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> 

Dla uzupełniania kodu (dla każdego, kto szuka na to w przyszłości) najprostsze JS:

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;