Ractive.extend() 与现有类

Question

我是 Ractive.js 的新手，虽然它非常容易学习，但我对如何实现我真正想要的一个功能感到困惑。 Ractive.extend() 的文档和教程中的所有示例都涉及添加内联自定义方法，而我希望它添加我已经在另一个文件中定义的类的实例。 我的标记有一个 #with 部分，其中包含几个画布元素，其中 id 和几个 CSS 值都是胡须。 为了避免复制代码并将我的所有数据存储在一个地方，我还希望使用相同的数据为每个画布元素实例化我的自定义类的对象，然后能够从中调用方法以响应事件代理. 换句话说就是这样，虽然我认为这不是正确的语法：

编辑：请随意在 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);
});

Answer 1

这可能是最好的方法：

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的问题 - 您不必这样做。 Ractive.extend()所有选项都是可选的，仅用作默认值。 但是，如果您在Ractive.extend()指定它，则不必在初始化时指定它。