Question

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

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

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（）与现有类

1 个答案: