Best way to pass my Backbone model information to the Cordova camera plugin

Question

I'm trying to create a mobile app screen using Cordova + Backbone + Backbone.Marionette which will have a placeholder icon of a camera (I'm also using require.js among other things, but don't think that's relevant to the issue I'm running into). When the placeholder is tapped, it brings up the native device camera app, the user can then take a picture, and the placeholder icon is replaced by the picture they took.

My question is once I actually get to the point where the picture has been taken, what is the best way to update my backbone model with the new picture? It makes sense to me to update the model with the picture data in the Cordova camera plugin's success function (cameraSuccess in my code below). But how can I pass my model to the success function? I know I could accomplish this using a global variable of some sort, but there has to be a better way!

As can be seen from the code snippet below, when my view triggers the event to take a picture (picture:taken), I have access to my model through the args object that is passed. But before I can make any use of this args object, I need to call the camera API, make sure it's successful, and then get the resulting output to be placed into my model.

require(['app','views/cameraview','models/camera'],function(Application,cameraview,cammod){

document.addEventListener("deviceready",onDeviceReady, false);

function onDeviceReady()
{
    //start the Marionette application
    Application.start();

    //create a new picture model with the placeholder picture
    var cameramod = new cammod({ picture:"res/placeholder.png" });

    //create a new view, this is basically just using an underscore template to shove the model's picture into an img tag.
    var CameraView = new cameraview({model:cameramod});

    Application.cameraregion.show(CameraView);

    //When the placeholder img is tapped, the view triggers the picture:taken event
    CameraView.on("picture:taken", function(args){

    //**** here I have access to the model with args.model, but I don't know how to properly access that from cameraSuccess ****

    navigator.camera.getPicture(cameraSuccess, cameraError, { 
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL,
        allowEdit: true,
        saveToPhotoAlbum: true
        });
    });
}

//Camera API success callback function
function cameraSuccess(imageData){

    //*** I need to set the model's picture as shown below, but have no access to the model ****
    //args.model.set({picture:"data:image/jpeg;base64," + imageData});

}
function cameraError(message){

    setTimeout(function() {
        alert('Failed because: ' + message);
    }, 0);

}
});

I think my problem is simple enough that this chunk of my application logic code should suffice. But I can also include my view, model, template, app, or whatever else if necessary.

Answer 1

Apart from the obvious cleanup that would be required, if you define the cameraSuccess function inside the onDeviceReady function, it'll have the access to the model in question, as it'll be a part of the closure.