流星：MeteorでHTML/HTML5コードを変換するにはどうすればよいですか？

HTML5/JSアプリケーションをダウンロードしましたが、Meteorでコードを動作させるとは思われません。下の例では、Meteorで動作するように変換する場所や方法を教えてください。（私のWebアプリケーションの残りの部分は、流星の上に構築されているので）流星：MeteorでHTML/HTML5コードを変換するにはどうすればよいですか？

<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>

出典

2016-07-24 Farhan

であなたのscratch.min.jsファイルを追加します。

私はあなたにそれを提案se 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の

出典

2016-07-24 15:58:24

そのことをありがとう...私は、特定の％が傷ついているときにサイトをリンクしますまた、イメージ全体を明らかにする...私はどこを見ますか？ – Farhan

'$（ '＃scratchcard'）。wScratchPad（{ size：5、//ブラシのサイズ/スクラッチ bg： '#cacaca'、//背景（イメージパスまたは16進色）。 fg： '＃6699ff'、//フォアグラウンド（イメージパスまたは16進色）。 realtime：true、//リアルタイムでパーセンテージを計算します。カーソル： '十字線' //カーソルを設定します。 scratchDown：関数（パーセント）{ IF（パーセント> 50）{ 行う気にいら }} }）。 ' –

scratchDown：関数（パーセント）{ \t if（パーセント> 50）{console.log（' eh '）; } } }）;コンソールログには何も表示されませんでした...また、私は彼らのgithubに続きましたが、何も返されませんでした...機能（e、パーセント）...私は彼らのパッケージ全体をインポートする必要がありますか？ – Farhan

client/compatibilityspecial folderであなたのscratch.min.jsファイルを追加します。
style CSSコンテンツをCSSファイルに移動します。
bodyの内容をbodyのHTMLファイルに移動します（テンプレートを使用したい場合）。
scriptの内容をJavaScriptファイルに移動します（同じテンプレートフックを使用したい場合）。あなたはbodyに直接HTMLコンテンツを移動した場合は
、window.onloadMeteor.startup()によってフックを交換してください。 HTMLコンテンツがテンプレートの一部である場合は、代わりにTemplate.myTemplate.onRendered()フックを使用します（Blazeを使用していると仮定します）。

出典

2016-07-24 10:45:00 ghybs

これを行う最良の方法は、ビュー、スタイル、およびコントローラを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" 
       }); 
    });

とクライアント/互換性

出典

2016-07-24 11:12:38

に依存し、それを実行しようとしたが、それはちょうど0％を示しています。しかし、私はどのようにGoogle Chromeのデベロッパーと元々あったこれらのファイルを実行する場合、それは正常に動作します。私はこれをローカルで実行すると、フォルダから開くだけで、同じことをすることに注意してください... – Farhan

流星：MeteorでHTML/HTML5コードを変換するにはどうすればよいですか？

答えて

関連する問題