Unter Child-Eigenschaften inRactive.js

Question

Neu inRactive.js und nach dem Lesen der Dokumente Ich bin immer noch auf etwas von der Syntax hängen. Mein Beispiel unten erstellt ein Canvas-Tag für jedes Element in meinem Array und instanziiert dann ein distinct Objekt einer benutzerdefinierten Klasse für jedes, um die Animation zu behandeln. Wie in den Kommentaren erwähnt, werfe ich drei Fehler.

Im Event-Handler möchte ich auf die Eigenschaft height verweisen (definiert in meinem Array), aber weder this.get (repeater.height) noch this.repeater.height funktionieren. Ich möchte auch eine Methode des Objekts aufrufen, die diesem Ereignis zugeordnet ist, aber die Verwendung von this.myCustomClass.setFrame() funktioniert auch nicht.

Ich bekomme auch mindestens einen Fehler im Code für meine Animationsklasse, wenn ich versuche, auf Methoden der Zeichenfläche zu verweisen: this.canvas.getContext() wo "Leinwand" ist die ID, die ich in der übergeben Objektkonstruktor.

Also klar verstehe ich etwas darüber, wie man auf Kind Eigenschaften von ractive Instanzen beziehen. Irgendwelche Hilfe hier?

var repeater = [ 
    {id: "stalkerOne", width: 225, height: 432, left: 8, spriteSheetURL: "spriteSheets/stalkerone.jpg", rows: 5, columns: 5, totalFrames: 24}, 
    {id: "stalkerTwo", width: 175, height: 432, left: 230, spriteSheetURL: "spriteSheets/stalkertwo.jpg", rows: 6, columns: 5, totalFrames: 26}, 
    {id: "stalkerThree", width: 251, height: 432, left: 404, spriteSheetURL: "spriteSheets/stalkerthree.jpg", rows: 6, columns: 5, totalFrames: 28} 
] 

var CanvasAnimation = Ractive.extend({ 
    oninit: function() { 
     this.get('repeaters').forEach(function(repeater){ 
      var myCanvasSprite = new CanvasSprite(repeater.id, repeater.width, repeater.height, repeater.spriteSheetURL, repeater.rows, repeater.columns, repeater.totalFrames); 
      myCanvasSprite.setFrame(0); 
      //this.canvas.getContext() throwing error in class code 
     }); 

     this.on('setFrame', function (event) { 
      var offsetY = event.original.clientY - event.node.getBoundingClientRect().top; 
      var relY = offsetY/this.get(repeater.height); //why doesn't this.get() work here? 
      this.myCanvasSprite.setFrame(relY); //custom class method not working either... 
     }); 
    } 
});  

var canvasAnimation = new CanvasAnimation({ 
    el: '#container', 
    template: '#template', 
    data: { repeaters: repeater } 
}); 

Answer 1

denke ich, was Sie fehlt, ist das Array von CanvasSprite Objekte zu den Ractive Daten hinzufügen und dann den Ereigniskontext unter Verwendung der aktuellen Sprite zu erhalten (https://jsfiddle.net/martypdx/srbvekc4/2/ für volle Beispiel):

var CanvasAnimation = Ractive.extend({ 
    template: ` 
     {{#each sprites}} 
      <li on-click='setFrame'>{{.id}}</li> 
     {{/each}}`, 
    oninit() { 
     var sprites = this.get('repeaters').map(function(repeater){  
      return new CanvasSprite(repeater.id, repeater.width, repeater.height, repeater.spriteSheetURL, repeater.rows, repeater.columns, repeater.totalFrames); 
     }); 

     // add the class instances to the data 
     this.set('sprites', sprites); 

     this.on('setFrame', function (event) { 
      // here's how we get the sprite from the event 
      var sprite = event.context; 
      var offsetY = event.original.clientY - event.node.getBoundingClientRect().top; 
      var relY = offsetY/sprite.height; 
      sprite.setFrame(relY); 
     }); 
    }, 
    onrender() { 
     // wait till render, otherwise nothing there! 
     this.get('sprites').forEach(sprite => sprite.setFrame(0)); 
    } 
}); 

EDIT: Sie auch Komponenten verwenden können, um besser jeden Sprit zu kapseln (siehe https://jsfiddle.net/martypdx/srbvekc4/1/):

var CanvasAnimation = Ractive.extend({ 
    template: ` 
     {{#each repeater}} 
      <Sprite options='{{this}}'></Sprite> 
     {{/each}}` 
});  

var Sprite = Ractive.extend({ 
    template: `<li on-click='setFrame'>{{sprite.id}}</li>`, 
    oninit() { 
     const sprite = new CanvasSprite(repeater.id, repeater.width, repeater.height, repeater.spriteSheetURL, repeater.rows, repeater.columns, repeater.totalFrames); 

     // since example template is using properties from sprite, 
     // we add it to the data 
     this.set('sprite', sprite); 

     this.on('setFrame', function (event) { 
      var offsetY = event.original.clientY - event.node.getBoundingClientRect().top; 
      var relY = offsetY/sprite.height; 
      sprite.setFrame(relY); 
     }); 
    }, 
    onrender() { 
     this.sprite.setFrame(0); 
    } 
}); 

var canvasAnimation = new CanvasAnimation({ 
    el: document.body, 
    template: '#template', 
    data: { repeaters: repeater }, 
    components: { Sprite } 
}); 

AKTUALISIERT: Verwenden Sie einen Konstruktor mit mehreren Parametern und haben Sie auch eine bessere Kapselung erreicht, wenn die Komponente die Instanziierung von CanvasSprite handhabt.