CODEWITHSUNDEEP
javascriptjquerybackbone.jsloadimage
Euan Millar
Euan Millar

Reputation: 466

Calling a jquery plugin's methods from within a backbone view

I am trying to call the loadImage.parseMetaData method of the loadImage library from within a function in my Backbone view, but it says that the method is undefined. The 3rd party plug in is this one:

http://blueimp.github.io/JavaScript-Load-Image/

I'm using requirejs to bring the plugins into my main.js file like so:

require.config({
paths: {
    jquery: 'vendor/jquery/jquery',
    loadimage: 'vendor/loadimage/load-image',
    loadimageorientation: 'vendor/loadimage/load-image-orientation',
    loadimageios: 'vendor/loadimage/load-image-ios',
    loadimageexif: 'vendor/loadimage/load-image-exif',
    loadimageexifmap: 'vendor/loadimage/load-image-exif-map',
    loadimagemeta: 'vendor/loadimage/load-image-meta',

....

In my view I'm creating it like this so that I can access the 3rd party plug-in:

define([
'jquery',
'underscore',
'backbone',
'channel',
'views/views.base',
'models/model.image','jcrop', 'loadimage', 'loadimageorientation', 'loadimageios', 'loadimageexif', 'loadimageexifmap', 'loadimagemeta'
], function($, _, Backbone, Channel, BaseView, ImageModel, jcrop, loadimage, loadimageorientation, loadimageios, loadimageexif, loadimageexifmap, loadimagemeta){
    /**
    *
    * @class AddView
    * @constructor
    * @extends BaseView
    */

    var AddView = BaseView.extend({

...

In my image upload function I'm attempting to call the 3rd party method "loadImage" but it says loadImage undefined. Obviously the scope is wrong here for calling a global 3rd party method. I'm wondering how I should do it:

imageSelected: function(e){
            e = e.originalEvent;
            var target = e.dataTransfer || e.target,
                that = this,
                file = target && target.files && target.files[0],
                options = {
                    maxWidth: 670,
                    canvas: true,
                    contain: true
                };
            if (!file) {
                return;
            }

            loadImage.parseMetaData(file, function (data) {
                if (data.exif) {
                    that.exifData=data.exif;
                }
                that.displayImage(file, options);
            });
        },

I have tried doing:

$(this.el).loadImage.parseMetaData(file, function (data) {

But then it can't find the parseMetaData part of the loadImage method.

Any help would be greatly appreciated.

Many thanks in advance,

Euan

Upvotes: 0

Views: 709

Answers (1)

rtorres
rtorres

Reputation: 2951

Javascript is case-sensitive. Try loadimage.parseMetaData() instead of loadImage.parseMetaData() so that it matches the casing of your loadimage param in the function signature.

Upvotes: 2

Related Questions