Meteor: Wie konvertiere ich HTML/HTML5 Code um mit Meteor zu arbeiten?

Ich habe eine HTML5/JS-App heruntergeladen, aber ich glaube nicht, dass sie mit Meteor funktioniert. Wie oder in welchem Fall gehe ich bei der Konvertierung mit Meteor um? (Da der Rest meiner Web-App auf Meteor gebaut)Meteor: Wie konvertiere ich HTML/HTML5 Code um mit Meteor zu arbeiten?

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

Quelle

2016-07-24 Farhan

Mein Vorschlag es zu Ihnen se https://github.com/websanova/wScratchPad.

Einfach herunterladen und verkleinerte Version in Client/Kompatibilität

Dann fügen Sie einfach tun:

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. 
     }); 
});

Auch gibt es drei weitere Rückrufe in denen Prozent zurück, so können Sie aktualisieren. ..

scratchDown : null,  // Set scratchDown callback. 
scratchUp : null,  // Set scratchUp callback. 
scratchMove : null,  // Set scratcMove callback.

Hinweis: es hängt von JQuery

Quelle

2016-07-24 15:58:24

Vielen Dank dafür ... Ich möchte festlegen, dass, wenn ein bestimmter Prozentsatz gekratzt wurde, wird die Website einen Link und enthüllen auch das gesamte Bild ... wo schaue ich hin? – Farhan

'$ ('# scratchcard'). WScratchPad ({ size: 5, // Die Größe des Pinsels/Scratch. bg: '#cacaca', // Hintergrund (Bildpfad oder Hex-Farbe). fg: '# 6699ff', // Vordergrund (Bildpfad oder Hex-Farbe). realtime: true, // Berechnet den Prozentsatz in der Realzeit. Cursor: 'Fadenkreuz' // Cursor setzen. scratchDown: Funktion (Prozent) { if (percent> 50) { do somthing } } }); ' –

scratchDown: Funktion (Prozent) { \t if (Prozent> 50) {console.log ('eh'); } } }); tat das, aber Konsolenprotokoll zeigte nichts ... auch ich folgte ihrem github, aber nichts kehrte auch zurück ... funktionierte (e, Prozent) ... muss ich ihr ganzes Paket importieren? – Farhan

Fügen Sie Ihre scratch.min.js Datei in client/compatibilityspecial folder.
Verschieben Sie Ihren CSS-Inhalt style in eine CSS-Datei.
Verschieben Sie den Inhalt Ihrer body in eine HTML-Datei, in einem body sowie (und wenn Sie möchten, durch eine Vorlage).
Verschieben Sie den Inhalt Ihrer script in einer JavaScript-Datei (und wenn Sie durch die gleichen Vorlage Hooks wünschen). Wenn Sie Ihren HTML-Inhalt direkt in body verschoben haben, ersetzen Sie window.onload durch Meteor.startup() Hook. Wenn der HTML-Inhalt Teil einer Vorlage ist, verwenden Sie stattdessen den Template.myTemplate.onRendered() Hook (vorausgesetzt, Sie verwenden Blaze).

Quelle

2016-07-24 10:45:00 ghybs

Der beste Weg, dies zu tun, ist, Ansicht, Stile und Controller in 3 Dateien zu trennen.

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" 
       }); 
    });

und Fügen Sie Ihre scratch.min.js Datei in Client/Kompatibilität

Quelle

2016-07-24 11:12:38

ich versuchte dies und versucht, es zu starten, zeigt es nur 0%. Allerdings, wenn ich diese Dateien wie es ursprünglich mit Google Chrome Dev lief, funktioniert es gut. Beachten Sie, dass, wenn ich lokal lokal nur aus dem Ordner öffnen, tut es das gleiche ... – Farhan

Meteor: Wie konvertiere ich HTML/HTML5 Code um mit Meteor zu arbeiten?

Antwort

Verwandte Themen