Ract.jsの子プロパティを参照

Question

Ractive.jsを初めて使用し、ドキュメントを読み終えた後、私はまだいくつかの構文を諦めています。以下の例では、のキャンバスタグをそれぞれ要素の配列に作成し、という異なるオブジェクトをアニメーションを処理するためのカスタムクラスのオブジェクトをインスタンス化します。コメントに記載されているように、私は3つのエラーを投げています。

イベントハンドラでは、heightプロパティ（my配列で定義されています）を参照しますが、this.get（repeater.height）もthis.repeater.heightも機能しません。また、そのイベントに関連付けられたオブジェクトのメソッドを呼び出すが、this.myCustomClass.setFrame（）を使用しても動作していない。

アニメーションクラスのコードで、キャンバスのメソッドを参照しようとすると、少なくとも1つのエラーが発生します。this.canvas.getContext（）ここで、「キャンバス」は、オブジェクトコンストラクタ。

明らかに、私はRactiveインスタンスの子プロパティを参照する方法について誤解しています。どんな助け？

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

は、私は（完全例えばhttps://jsfiddle.net/martypdx/srbvekc4/2/を参照）何が欠けていることは、現在のスプライトを取得するためにイベント・コンテキストを使用して、その後RACTIVEデータにCanvasSpriteオブジェクトの配列を追加し、だと思う：

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：あなたはまた、より良い各スプライトをカプセル化するコンポーネントを使用することができます（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 } 
}); 

UPDATED：マルチパラメータコンストラクタを使用し、コンポーネントがCanvasSpriteのインスタンシエーションを処理する場合に、より優れたカプセル化を実現しました。