在Ractive.js中引用子属性

Question

Ractive.js的新手，在阅读了文档之后，我仍然挂在某些语法上。 下面的示例为数组中的每个元素创建一个canvas标记，然后为每个实例化一个自定义类的不同对象以处理动画。 如评论中所述，我抛出了三个错误。

在事件处理程序中，我想引用height属性（在我的数组中定义），但是this.get（repeater.height）和this.repeater.height都不起作用。 我也想调用与该事件关联的对象的方法，但是使用this.myCustomClass.setFrame（）也不起作用。

当我尝试引用画布的方法时，我的动画类代码中也至少出现一个错误：this.canvas.getContext（） 其中“ canvas”是我在对象构造函数中传递的ID。

很明显，我对如何引用Ractive实例的子属性有些误解。 这里有什么帮助吗？

var repeater = [
    {id: "stalkerOne", width: 225, height: 432, left: 8, spriteSheetURL: "spriteSheets/stalkerone.jpg", rows: 5, columns: 5, totalFrames:  24},
    {id: "stalkerTwo", width: 175, height: 432, left: 230, spriteSheetURL: "spriteSheets/stalkertwo.jpg", rows: 6, columns: 5, totalFrames:  26},
    {id: "stalkerThree", width: 251, height: 432, left: 404, spriteSheetURL: "spriteSheets/stalkerthree.jpg", rows: 6, columns: 5, totalFrames:  28}
]

var CanvasAnimation = Ractive.extend( {
    oninit: function() {
        this.get('repeaters').forEach(function(repeater){
            var myCanvasSprite = new CanvasSprite(repeater.id, repeater.width, repeater.height, repeater.spriteSheetURL, repeater.rows, repeater.columns, repeater.totalFrames);
            myCanvasSprite.setFrame(0);
            //this.canvas.getContext() throwing error in class code
        });

        this.on('setFrame', function (event) {
            var offsetY = event.original.clientY - event.node.getBoundingClientRect().top;
            var relY = offsetY/this.get(repeater.height); //why doesn't this.get() work here?
            this.myCanvasSprite.setFrame(relY); //custom class method not working either...
        });
    }
});       

var canvasAnimation = new CanvasAnimation({
    el: '#container',
    template: '#template',
    data: { repeaters: repeater }
});

Answer 1

我认为您所缺少的是将CanvasSprite对象数组添加到Ractive数据，然后使用事件上下文获取当前的Sprite（有关完整示例，请参见https://jsfiddle.net/martypdx/srbvekc4/2/ ）。 ：

var CanvasAnimation = Ractive.extend( {
    template: `
        {{#each sprites}}
            <li on-click='setFrame'>{{.id}}</li>
        {{/each}}`,
    oninit() {
        var sprites = this.get('repeaters').map( function(repeater){    
            return new CanvasSprite(repeater.id, repeater.width, repeater.height, repeater.spriteSheetURL, repeater.rows, repeater.columns, repeater.totalFrames);
        });

        // add the class instances to the data
        this.set( 'sprites', sprites );

        this.on('setFrame', function (event) {
            // here's how we get the sprite from the event
            var sprite = event.context;
            var offsetY = event.original.clientY - event.node.getBoundingClientRect().top;
            var relY = offsetY/sprite.height;
            sprite.setFrame(relY);
        });
    },
    onrender() {
        // wait till render, otherwise nothing there!
        this.get( 'sprites' ).forEach( sprite => sprite.setFrame(0) );
    }
});  

编辑：您还可以使用组件更好地封装每个精灵（请参阅https://jsfiddle.net/martypdx/srbvekc4/1/ ）：

var CanvasAnimation = Ractive.extend( {
    template: `
        {{#each repeater}}
            <Sprite options='{{this}}'></Sprite>
        {{/each}}`
});    

var Sprite = Ractive.extend({
    template: `<li on-click='setFrame'>{{sprite.id}}</li>`,
    oninit() {
        const sprite = new CanvasSprite( repeater.id, repeater.width, repeater.height, repeater.spriteSheetURL, repeater.rows, repeater.columns, repeater.totalFrames );

        // since example template is using properties from sprite,
        // we add it to the data
        this.set( 'sprite',  sprite );

        this.on('setFrame', function (event) {
            var offsetY = event.original.clientY - event.node.getBoundingClientRect().top;
            var relY = offsetY/sprite.height;
            sprite.setFrame(relY);
        });
    },
    onrender() {
        this.sprite.setFrame(0);
    }
});

var canvasAnimation = new CanvasAnimation({
    el: document.body,
    template: '#template',
    data: { repeaters: repeater },
    components: { Sprite }
});

更新：使用多参数构造函数，并且如果组件处理CanvasSprite实例化，还可以实现更好的封装。