在Ember JS應用程序中初始化cloudinary_js v2

我試圖從EmberJS應用程序（v2.6）上傳圖像到cloudinary，在post of Beerlington之後，它使用cloudinary_js（現在使用新API v2）併爲了安裝它：在Ember JS應用程序中初始化cloudinary_js v2

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

來源

2016-08-01 figuedmundo

餘燼-CLI-build.js - app.import（的.js> ....包括所有必需的文件 – kumkanillam

作爲我安裝的庫與NPM它們在npm_modules /和時。我試圖導入它在ember-cli-build.js，它抱怨。它適用於供應商/和bower_components/ – figuedmundo

我也試過用ember-browserify，但它沒有與cloudinary-jquery-file-upload無效:( – figuedmundo

由於ember.js本質上是一個客戶端框架，你需要使用亭子庫，而不是NPM（more）。

安裝Cloudinary使用亭子：

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

（blueimp將安裝作爲一個依賴。）

進口添加到您的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。

現在你可以在你的代碼中使用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. 

     )} 
    ); 
    } 
    });

來源

2016-08-08 05:17:18 tocker

在Ember JS應用程序中初始化cloudinary_js v2

回答

相關問題