Javascript 使用现有类扩展

我是Ractive.js的新手，虽然学习起来容易得离谱，但我还是对如何实现我真正想要的一个功能挂起了钩。Ractive.extend（）的文档和教程中的所有示例都涉及内联添加自定义方法，而我希望它添加我已在另一个文件中定义的类的实例。我的标记有一个#with部分，其中包含几个canvas元素，其中id和几个CSS值都是mustaches。为了避免复制代码并将所有数据存储在一个地方，我希望同样的数据也能用于为每个画布元素实例化自定义类的对象，然后能够从中调用方法以响应事件代理。换言之，虽然我不认为这是正确的语法：

编辑：可以在react.js中自由回答。我正在同时学习这两个框架，但我认为JXS可能会使这更容易实现。代码示例应该足够简单，只有熟悉react的人才能理解

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);
});

---

这可能是最好的方法：

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 () { ... });
    };
};

---

要回答有关指定

模板的问题，您不必这样做。
Ractive.extend（）
的所有选项都是可选的，仅作为默认值。但是，如果您在
Ractive.extend（）
中指定它，则不必在初始化时指定它。
我对其中的一部分感到困惑。当您实例化它时，您将this.get（'canvas1.id'）作为第一个参数传递，但我需要它为每个canvas对象实例化一个实例。我将把数据存储在一个数组中，我需要它来实例化canvas1，还有canvas2…canvas100等等。另外，如果我在Ractive.extend（）中调用这个.on（），它是否仍然能够提取事件属性（比如clientY）和元素的内置方法，比如getBoundingClientRect（）？我只是想确定一下，因为这一点是为我在数据数组中定义的每个画布实例化一个不同的对象，然后分别为每个画布运行该事件代理，因此，当鼠标经过第一个或第二个或第三个画布时，它应该解析来自特定事件调用和元素的数据，以传递给画布对象的setFrame（）方法。谢谢这只是一个例子。如果有多个画布，可以将它们存储在一个数组中，然后使用数组#forEach循环实例化自定义类
this
内部事件处理程序指向Ractive实例，但您可以通过
this.event
获取事件属性（包括节点）。我已经将它们存储在数组中，但显然无法从Ractive.extend（）内部访问它们。因此，在您的示例中，我不能仅将前两行包装在oninit in data.forEach（function（）{}中，因为它不知道“data”是什么…谢谢，确实是这样！但现在每当我尝试调用画布的方法时，它都会抛出错误，这两行都在我的代码示例中的事件处理程序中（this.getBoundingClientRect不是函数）在我的动画课上（this.canvas.getContext不是一个函数）。有什么想法吗？如果没有，我可能会提出一个新问题：(