引用 Ractive.js 中的子属性

Question

Ractive.js 的新手，在阅读了文档之后，我仍然对某些语法很感兴趣。我在下面的示例中为数组中的 each 元素创建了一个 canvas 标记，然后实例化了自定义 [=35= 的 distinct 对象] 为每个处理动画。如评论中所述，我抛出了三个错误。

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

当我尝试引用 canvas 的方法时，我的动画代码 class 也至少出现一个错误：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 数据，然后使用事件上下文获取当前精灵（完整示例请参见 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.

的实例化，则使用多参数构造函数并实现更好的封装

引用 Ractive.js 中的子属性

Referring to Child Properties in Ractive.js

javascript

ractivejs