Ractive.extend() with existing classes

I'm new to Ractive.js and although it's been ridiculously easy to learn I'm hung up on how to implement the one feature I really want out of it. All of the examples in both the documentation and tutorials for Ractive.extend() involve adding custom methods inline whereas I want it to add instances of a class I have already defined in another file. My markup has a #with section containing several canvas elements where the id and several CSS values are all mustaches. In order to avoid replicating code and store all my data in one place, I want the same data to also be used to instantiate an object of my custom class for each canvas element and then be able to call methods from it in response to event proxies. In other words something like this, although I don't think it's the correct syntax:

EDIT: Feel free to answer in react.js instead. I'm learning both frameworks at once, but think JXS might make this easier to implement. And the code sample should be simple enough for people only familiar with react to understand.

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

Solution

This is probably the best way:

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

To answer your question about specifying template - you don't have to. All options for Ractive.extend() are optional and only act as default values. However, if you specify it in Ractive.extend() you won't have to specify it on initialization.