既存のクラスを使ったRactive.extend（）

Question

私はRactive.jsを使い慣れていますが、覚えがたいほど簡単ですが、本当に必要な機能を実装する方法を忘れています。 Ractive.extend（）のドキュメントとチュートリアルの例には、カスタムメソッドをインラインで追加する方法がありますが、別のファイルで既に定義したクラスのインスタンスを追加する方法があります。私のマークアップには#withセクションがあり、idといくつかのCSS値がすべてコサツであるいくつかのキャンバス要素が含まれています。コードの複製を避け、すべてのデータを1か所に格納するために、同じデータを使用して、各キャンバス要素のカスタムクラスのオブジェクトをインスタンス化し、イベントプロキシに応じてそこからメソッドを呼び出すことができます。 。言い換えれば、私はそれが正しい構文だとは思わないが、このようなものだ。

EDIT：代わりにreact.jsで自由に答えることができる。私はすぐに両方のフレームワークを学んでいますが、JXSはこれをより簡単に実装できると考えています。そして、コードサンプルは、理解するために反応に精通している人にとっては十分に単純でなければなりません。 - あなたがする必要はありません

var CanvasAnimation = Ractive.extend() { 
    oninit: function() { 
     this.get('canvases').forEach(function (canvas) { 
      var myCustomClass = new customClass(canvas.id, ...); 
      myCustomClass.setFrame(0); 
     }); 

     this.on('setFrame', function() { ... }); 
    }; 
}; 

がtemplateの指定については、あなたの質問に答えるために：

var CanvasAnimation = Ractive.extend(){ 
    //do I need to specify a template here? 
    var myCustomClass = 
     new customClass(this.id, this.width, this.height, this.animationURL); 
    myCustomClass.setFrame(0); 

    /* or is something like this better? may require updating my selector... 
    var myCustomClass = new customClass(); 
    oninit: function() { 
     myCustomClass(this.id, this.width, this.height, this.spriteSheetURL); 
     myCustomClass.setFrame(0); 
    }; 
    */ 
}; 

var canvasAnimation = new CanvasAnimation({ 
    el: '#container', 
    template: '#template', 
    data: { 
     //data for each canvas element goes here 
     canvas1: { 
      id: , 
      width: , 
      height: , 
      left: , 
      animationURL: 
     } 
    } 
}); 

canvasAnimation.on('setFrame', function (event) { 
    //scale mouseY and call customClass method 
    var offsetY = event.clientY - this.getBoundingClientRect().top; //is this right? 
    var relY = offsetY/this.height; 
    this.myCustomClass.setFrame(relY); 
}); 

Answer 1

は、これはおそらく最良の方法です。 Ractive.extend()のすべてのオプションはオプションで、デフォルト値としてのみ機能します。ただし、Ractive.extend()で指定した場合は、初期化時に指定する必要はありません。