Nicht möglich, Funktionen von externen Skripten in Meteor

auszuführen Ich versuche, das Jquery-Plugin namens Cropper in einem Meteor-Projekt zu implementieren, an dem ich arbeite, und es gibt mir einige verwirrende Ergebnisse.Nicht möglich, Funktionen von externen Skripten in Meteor

Alsofar ich habe cropper als npm über die Befehlszeile importiert und dann eine Methode aus cropper verwendet, um das fragliche Bild für das Zuschneiden einzurichten und das hat gut funktioniert. Allerdings, wenn ich eine cropper-Funktion an eine Schaltfläche innerhalb der gleichen Vorlage angehängt bekomme ich einen Fehler von "cropper nicht definiert" in der Konsole.

Mein Code sieht thusfar wie folgt aus: Client/main.html:

<head> 
    <title>Testing Cropper</title> 
</head> 


<body> 
    <div> 
     {{> StudentImageDisplay}} 
    </div> 
</body> 

<template name="StudentImageDisplay"> 
    Click and drag a box to select the portion of the image you would like to use.<br> 
    Double click image to shift between selection box and image draggning<br> 
    Click the Save button below to save to database. <br> 
    <div class="StudentImage"> 
     <img src="/Science.jpg" alt="studentimage"> 
    </div> 
    <div> 
     <button class="CropImage">Crop</button> 
    </div> 
</template>

main.js

import { Template } from 'meteor/templating'; 
import { ReactiveVar } from 'meteor/reactive-var'; 

import './main.html'; 

Template.StudentImageDisplay.onRendered(function() { 
    $('.StudentImage > img').cropper({ 
     aspectRatio: 0.75, 
     autoCropArea: 0.65, 
     strict: false, 
     guides: false, 
     highlight: false, 
     dragCrop: false, 
     cropBoxMovable: false, 
     cropBoxResizable: false 
    }); 
}); 

Template.StudentImageDisplay.events({ 
    'click .CropImage': function (event) { 
    event.preventDefault(); 
    cropper.getCroppedCanvas(); 
    console.log("Cropped image to Canvas for realsies"); 
    } 
});

Das Problem am unteren Rand in diesem cropper.getCroppedCanvas() -Aufruf entsteht, da es nur einen Fehler von "Uncaught Exception: cropper ist nicht definiert" gibt.

Ich denke, ich vermisse hier etwas wirklich Grundlegendes, so dass es nicht richtig importiert wurde oder es außerhalb des Umfangs liegt, aber ich habe jetzt ungefähr eine Stunde damit herumhantiert und kann den Beispielcode nicht gut genug entziffern um mein Problem zu finden. Wenn mir jemand sagen könnte, was ich hier vermisse, würde das sehr geschätzt werden.

Quelle

2016-05-24 Ben Musgrove