Initialisiere cloudinary_js v2 in Ember JS App

Question

Ich versuche Bilder von einer EmberJS App (v2.6) in den Cloudinary zu laden, indem ich die post of Beerlington benutze, wo cloudinary_js (jetzt mit neuer API v2) verwendet wird und um es zu installieren:

Aber wenn ich versuche, das Cloudinary zu initialisieren, wird die Bibliothek nicht erkannt.

#app/initializers/cloudinary.js 
export default { 
    name: 'cloudinary', 
    initialize: function(/* container, app */) { 
    jQuery.cloudinary.config({ 
     cloud_name: ENV.CLOUDINARY_NAME 
    }); 
    } 
}; 

#console 
TypeError: Cannot read property 'config' of undefined 

Answer 1

Da Ember.js ist im Wesentlichen ein Client-Seite Rahmen, müssen Sie Bower Bibliotheken verwenden, anstatt von NPM (more).

installieren Cloudinary mit Bower:

bower install cloudinary-jquery-file-upload --save 

(blueimp als Abhängigkeit installiert werden.)

Fügen Sie die Importe Ihre ember-cli-build.js Datei:

/*jshint node:true*/ 
/* global require, module */ 
var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 

module.exports = function(defaults) { 
    var app = new EmberApp(defaults, { 
    // Add options here 
    }); 

    app.import("bower_components/jquery/dist/jquery.js"); 
    app.import("bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"); 
    app.import("bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"); 
    app.import("bower_components/blueimp-file-upload/js/jquery.fileupload.js"); 
    app.import('bower_components/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js'); 

    return app.toTree(); 
}; 

hinzufügen jQuery zum globalen Definitionen in .jshintrc (zeigt Fragment hier):

Fügen Sie cloudinary hinzu, wenn Sie beabsichtigen, den Cloudinary-Namespace direkt zu verwenden.

Jetzt können Sie Cloudinary und Blueimp in Ihrem Code verwenden. Zum Beispiel:

import Ember from 'ember'; 

export default Ember.Route.extend(
    { 
    model() { 
     $.cloudinary.config({"cloud_name": "your_cloud"}); 
     $(document).ready(function() { 
     $(".cloudinary-fileupload").cloudinary_fileupload(

     // etc. 

     )} 
    ); 
    } 
    });