无法弄清楚如何让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屏蔽代码在流星中工作

回答

相关问题