如何在模板中組織畫布腳本

Question

如何將畫布腳本分隔成助手？目前它只有在它直接寫入模板本身時纔有效。我想這是微不足道的 - 但我找不到如何去做。謝謝！ （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代碼裏面。這只是模板。您需要直接調用實際功能。

Answer 2

基於新的代碼，你有一個新的bug：

myImage.src= this.sprite.url; 

應該

myImage.src= this.data.sprite.url;