Ember JSアプリでcloudinary_js v2を初期設定

Question

cloudinary_js（現在は新しいAPI v2を使用）を使用し、インストールするには、post of Beerlingtonに続いて、EmberJSアプリ（v2.6）から画像をCloudLogicにアップロードしようとしています：

npm install blueimp-file-upload --save 
npm install cloudinary-jquery-file-upload --save 

しかし、私は、ライブラリが認識されないcloudinaryを初期化しようとしています。

#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

ember.jsは、基本的にクライアント側のフレームワークですので、あなたの代わりにNPM（more）の亭ライブラリを使用する必要があります。

亭を使用してCloudinaryをインストールします（。blueimp依存関係としてインストールされます）

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

あなたember-cli-build.jsファイルにインポートを追加します。

/*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(); 
}; 

グローバルにjQueryを追加.jshintrcの定義（のフラグメントをここに示します）：

{ 
    "predef": [ 
    "document", 
    "window", 
    "-Promise", 
    "jQuery", 
    "$" 
    ], 
    "browser": true, 
    // rest of file... 
} 

cloudinaryを追加すると、雲母の名前空間を直接使用することになります。

これで、CloudinaryとBlueimpをコードで使用できるようになりました。たとえば、次のように

import Ember from 'ember'; 

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

     // etc. 

     )} 
    ); 
    } 
    });