私はRactive.jsを使い慣れていますが、覚えがたいほど簡単ですが、本当に必要な機能を実装する方法を忘れています。 Ractive.extend()のドキュメントとチュートリアルの例には、カスタムメソッドをインラインで追加する方法がありますが、別のファイルで既に定義したクラスのインスタンスを追加する方法があります。私のマークアップには#withセクションがあり、idといくつかのCSS値がすべてコサツであるいくつかのキャンバス要素が含まれています。コードの複製を避け、すべてのデータを1か所に格納するために、同じデータを使用して、各キャンバス要素のカスタムクラスのオブジェクトをインスタンス化し、イベントプロキシに応じてそこからメソッドを呼び出すことができます。 。言い換えれば、私はそれが正しい構文だとは思わないが、このようなものだ。既存のクラスを使ったRactive.extend()
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);
});
私はこれの一部について混乱しています。それをインスタンス化するとき、this.get( 'canvas1.id')を最初の引数として渡しますが、*すべての* canvasオブジェクトのインスタンスをインスタンス化する必要があります。私は配列にデータを格納するつもりですが、これはcanvas1だけでなくcanvas2 ... canvas100などもインスタンス化する必要があります。また、Ractive.extend()でthis.on()を呼び出すとイベントプロパティ(clientYのような)とgetBoundingClientRect()のような要素の組み込みメソッドを拾うことができますか? –
これは、データ配列で定義した各キャンバスの個別のオブジェクトをインスタンス化し、それぞれのイベントプロキシを個別に実行するため、マウスが最初の第2または第3のキャンバスでは、その特定のイベント呼び出しおよび要素のデータを解析して、そのキャンバスのオブジェクトのsetFrame()メソッドに渡す必要があります。ありがとう! –
これは単なる例でした。複数のキャンバスがある場合は、それらを配列に格納し、Array#forEachループを使用してカスタムクラスをインスタンス化できます。 'this'内部のイベントハンドラはRactiveインスタンスを指しますが、' this.event'を介してイベントプロパティ(ノードを含む)を取得できます。 –