javascript - 如何在模板中组织 Canvas 脚本

Question

如何将 Canvas 脚本分离到助手中？目前，只有将其直接写入模板本身时，它才有效。我想这很简单——但我不知道该怎么做。谢谢! (scaledSprite也是一个助手)

<template name="spriteBox">
    <script>
        var myImage = new Image();
        myImage.src="{{ spirte.url store='OriginalPix' }}";

        myImage.onload = function() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.fillStyle = "{{ sprite.metadata.backColor }}";
            ctx.fillRect(0, 0, {{ scaledSprite.widthDevice }}, {{ scaledSprite.heightDevice }});
            ctx.imageSmoothingEnabled = false;
            ctx.drawImage(myImage, 0, 0, {{ scaledSprite.widthDevice }}, {{ scaledSprite.heightDevice }});
        }
    </script>
    <canvas id="myCanvas" width="{{ scaledSprite.widthDevice }}" height="{{ scaledSprite.heightDevice }}" style="width:{{ scaledSprite.width }}px; height: {{ scaledSprite.height }}px;">
        This browser does not support HTML5 canvas
    </canvas>
</template>

这不起作用:尝试分离脚本并将其移动到 spriteBox.js:

Template.spriteBox.rendered = function () {
    var myImage = new Image();
    myImage.src= this.sprite.url;
        // > Exception from Tracker afterFlush function: Cannot read property 'url' of undefined
        // > TypeError: Cannot read property 'url' of undefined

    myImage.onload = function() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = this.sprite.metadata.backColor;
        ctx.fillRect(0, 0, scaledSprite.widthDevice, scaledSprite.heightDevice);
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(myImage, 0, 0, scaledSprite.widthDevice, scaledSprite.heightDevice);
    }
};

HTML

<template name="spriteBox">
    <canvas id="myCanvas" width="{{ scaledSprite.widthDevice }}" height="{{ scaledSprite.heightDevice }}" style="width:{{ scaledSprite.width }}px; height: {{ scaledSprite.height }}px;">
        This browser does not support HTML5 canvas
    </canvas>
</template>

铁路由器

Router.route('/spriteBox/:_id/:boxsize', {
    name: 'spriteBox',
    template: 'spriteBox',
    waitOn: function() {
        return [
            subs.subscribe('aPix', this.params._id)
        ];
    },
    data: function() {
        var spriteDocument = MyPix.findOne({_id: this.params._id});
        templateData = {
            sprite: spriteDocument,
        }
        return templateData;
    }
});

Answer 1

渲染函数的一个明显问题是您不能在 JavaScript 代码中使用 {{...}}。这仅适用于模板。您需要直接调用实际的函数。