Aurelia: Rendern von Objekten, die vom Server im Repeater abgerufen werden, und Bindung an Eltern

Question

Ich versuche, eine Liste von Objekten (JSON) vom Server abzurufen, sie dann in einem Repeater rendern und einen Klick-Handler für jedes dieser Elemente zu haben vom übergeordneten Ansichtsmodell verarbeitet werden. Bisher habe ich:

/* list.html */ 
<template> 
    <require from="./components/player.html"></require> 
    <div> 
    <player repeat.for="p of players" containerless player-data.bind="p" dosth.call="dosth(p)"></player> 
    </div> 
</template> 

Dann wird der Spieler benutzerdefinierte Element:

/* player.html */ 
<template> 
    ${playerData.name} 
    <button click.delegate="dosth()">DO STH</button> 
<template> 

Und der Spieler Modell:

/* player.ts */ 
import {customElement, bindable} from 'aurelia-framework'; 

@customElement('player') 
export class PlayerModel { 
    @bindable playerData: any; 
    @bindable dosth; 

    bind(ctxt: any) { 
    console.log(ctxt); 
    } 
} 

Wenn ich Daten vom Server empfangen:

return this.http.fetch('players') 
    .then(response => response.json()) 
    .then(players => { 
     for (let p of players) { 
     var model = new PlayerModel(); 
     model.playerData = p; 
     this.players.push(model); 
     } 
    }); 

Wobei this.players ein Array pr Opery im list.ts View-Modell.

Ich habe 2 Fragen:

1. Meine bind Methode auf dem PlayerModel nicht ausgelöst wird - warum?
2. Ich kann die Dosth-Funktion nicht funktionieren. Ich bekomme 'Dosth' ist kein Funktionsfehler.

Kann mir jemand in die richtige Richtung zeigen?

Answer 1

Sie laden ein benutzerdefiniertes HTML-Element. Wenn Sie ein View-Modell haben (in Ihrem Fall), müssen Sie das benutzerdefinierte Element ohne .html anfordern. Wie folgt aus:

<require from="./components/player"></require> <!-- no .html here --> 

Zusätzlich containerless in HTML-Markup funktioniert nur für HTML-only benutzerdefinierte Elemente. In Ihrem Fall müssen Sie in Ihrem View-Modell containerless deklarieren. Wie folgt aus:

import {customElement, bindable, containerless} from 'aurelia-framework'; 

@containerless 
@customElement('player') 
export class PlayerModel { 
    @bindable playerData: any; 
    @bindable dosth; 

    bind(ctxt: any) { 
    console.log(ctxt); 
    } 
} 

Weitere Informationen unter http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-elements/2