流星:如何将HTML/HTML 5代码转换为与Meteor一起工作？
流星:如何将HTML/HTML 5代码转换为与Meteor一起工作？
提问于 2016-07-24 10:31:37
我下载了HTML5 5/JS应用程序，但我认为它们的代码不适用于Meteor。给出下面的例子，我该如何将它转换成与Meteor一起工作呢？(因为我的其他网络应用程序都是建立在Meteor上的)
<template name="scratch">
<head>
<meta charset="utf-8" />
<title>scratch.js - Example 1</title>
<script type="text/javascript" src="assets/js/scratch.min.js"></script>
<script>
function callback(d) { d.container.style.backgroundImage = 'url(assets/images/demo1-end.gif)'; d.container.innerHTML = ''; }
function percent(p) { document.getElementById("counter").innerHTML = p; }
window.onload = function() {
createScratchCard({
"container":document.getElementById("scratchcard"),
"background":"assets/images/demo1-background.png",
"foreground":"assets/images/demo1-foreground.png",
"percent":85,
"coin":"assets/images/coin2.png",
"thickness":18,
"counter":"percent",
"callback":"callback"
});
}
</script>
<style>
body { text-align: center; }
#scratchcard { display: block; width: 180px; height: 180px; margin: 40px auto; }
</style>
</head>
<body>
<div id="scratchcard"></div>
<span id="counter">0</span><span>%</span>
</body>
</template> 回答 3
Stack Overflow用户
回答已采纳
发布于 2016-07-24 15:58:24
我建议它使用https://github.com/websanova/wScratchPad。
只需下载并在客户机/兼容性中添加小型化版本即可。
然后你就可以做：
Template.templateName.onRendered(function() {
$('#scratchcard').wScratchPad({
size : 5, // The size of the brush/scratch.
bg : '#cacaca', // Background (image path or hex color).
fg : '#6699ff', // Foreground (image path or hex color).
realtime : true, // Calculates percentage in realitime.
cursor : 'crosshair' // Set cursor.
});
});另外还有三个额外的回调，返回百分比，所以您将能够更新.
scratchDown : null, // Set scratchDown callback.
scratchUp : null, // Set scratchUp callback.
scratchMove : null, // Set scratcMove callback.注意:它依赖于JQuery
Stack Overflow用户
发布于 2016-07-24 10:45:00
- 将
scratch.min.js文件添加到client/compatibility特殊文件夹中。 - 将
styleCSS内容移动到CSS文件中。 - 将
body的内容移动到body文件中(如果您愿意，也可以通过模板)。 - 将
script的内容移动到JavaScript文件中(如果您愿意，可以通过相同的模板挂钩)。 - 如果您已经在
body中直接移动了HTML内容，请将window.onload替换为Meteor.startup()钩子。如果HTML是模板的一部分，则使用Template.myTemplate.onRendered()钩子(假设您使用的是Blaze)。
Stack Overflow用户
发布于 2016-07-24 11:12:38
最好的方法是在3个文件中分离视图、样式和控制器。
scratch.html
<template name="scratch">
<body>
<div id="scratchcard"></div>
<span id="counter">0</span><span>%</span>
</body>
</template>scratch.css
body { text-align: center; }
#scratchcard { display: block; width: 180px; height: 180px; margin: 40px auto; }scratch.js
function callback(d) {
d.container.style.backgroundImage = 'url(assets/images/demo1-end.gif)';
d.container.innerHTML = '';
}
function percent(p) {
document.getElementById("counter").innerHTML = p;
}
Template.scratch.onRendered(function(){
createScratchCard({
"container":document.getElementById("scratchcard"),
"background":"assets/images/demo1-background.png",
"foreground":"assets/images/demo1-foreground.png",
"percent":85,
"coin":"assets/images/coin2.png",
"thickness":18,
"counter":"percent",
"callback":"callback"
});
});并在客户端/兼容性中添加scratch.min.js文件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38551061
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号