無法弄清楚如何讓css/js屏蔽代碼在流星中工作

我發現了example code，我覺得我只需要插入它，但我對流星很陌生，我希望只是做出簡單的天真錯誤。我認爲jquery已經包含在Meteor中，並且如果我在「客戶端」代碼部分使用$或document.getElementById，它可以工作，但是我要麼爲後者獲得一個空值，並且沒有爲前者定義$：（無法弄清楚如何讓css/js屏蔽代碼在流星中工作

我試圖儘可能簡潔與我在這個職位代碼

這裏是我的項目中屏蔽的JavaScript代碼：

if (Meteor.isClient) { 

    var canvas = document.getElementById("canvas");; 
    if (canvas[0].getContext) { 
     var context = $canvas[0].getContext('2d'); 
     context.fillStyle = 'red'; 
     context.fillRect(10, 10, 300, 60); 
    } 
}

下面是相關的CSS代碼：

#box { 
    width: 150px; 
    height: 150px; 
    background-color: blue; 
    border-radius: 50px; 
    overflow: hidden; 
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */ 
}

的html代碼：

<template name="applicationLayout"> 
<div id = "backgroundDiv"> 
</div> 

<div id="box"> 
    <canvas id="canvas" width="300px" height="300px"></canvas> 
</div> 
<div style="width: 40%"> 
    <header> 
     {{> logoFloat}} 
     {{> navbar}} 
    </header> 
    {{> yield}} 
    {{> footer}} 
</div>

UPDATE我能得到這個使用薩爾曼的Template.applicationLayout.onRendered（）函數，然後anomepani JavaScript的DOM選擇器代碼，並通過添加ID工作= 「帆布」到我的畫布對象。謝謝你們的幫助，我希望我可以將兩者都標爲答案。

來源

2016-03-07 smuggledPancakes

你需要用你的客戶端代碼onRendered方法

if (Meteor.isClient) { 
    Template.applicationLayout.onRendered(function(){ 
     var $canvas = document.getElementById("canvas"); 
     if (canvas[0].getContext) { 
      var context = $canvas[0].getContext('2d'); 
      context.fillStyle = 'red'; 
      context.fillRect(10, 10, 300, 60); 
     } 
    }); 
}

來源

2016-03-07 05:29:21

您已從Example code複製的代碼，但你已經混了，這就是爲什麼它不工作

jQuery選擇和JavaScript DOM選擇使用JavaScript DOM選擇

var canvas = document.getElementById("canvas");; 
    if (canvas.getContext) { 
     var context = canvas.getContext('2d'); 
     context.fillStyle = 'red'; 
     context.fillRect(10, 10, 300, 60); 
    }

試試這一個或試試這一個使用jQuery SE講師

 var $canvas = $("#canvas"); 
     //you can create variable canvas instead '$canvas' both works 
     if ($canvas[0].getContext) { 
      var context = $canvas[0].getContext('2d'); 
      context.fillStyle = 'red'; 
      context.fillRect(10, 10, 300, 60); 
     }

來源

2016-03-07 12:27:42 anomepani

出於某種原因，我仍然得到「$」是不是一個函數，即使我把它包起來，如果（Meteor.isClient）{ Template.applicationLayout.onRendered（函數（）{}}）; – smuggledPancakes

@smuggledpancakes你可以請在jsfiddle中分享一些代碼，以便我可以追蹤。 '$'不是函數意味着$符號被定義和jquery加載，否則它會拋出引用錯誤 – anomepani

我認爲$不是一個函數，因爲我必須在onCreated，onRendered或onDestroyed函數中使用它，請參閱http：// docs.meteor.com/#/full/template_inst。我很確定這是它。 – smuggledPancakes

無法弄清楚如何讓css/js屏蔽代碼在流星中工作

回答

相關問題