Ractive.extend() 与现有类

Question

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

编辑：请随意在 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() 中指定它，则不必在初始化时指定它。

Ractive.extend() 与现有类

Ractive.extend() with existing classes

javascript

reactjs

ractivejs

Ractive.extend() 与现有 类

Ractive.extend() with existing classes

javascript

reactjs

ractivejs

Ractive.extend() 与现有类