javascript - 通过 Backbone.js View 使用 Cordova 拍照

Question

我正在尝试使用 Cordova API(在 IBM Worklight 中)拍照，但成功回调似乎从未触发(当我在 Backbone.js 之外使用相同的代码时，它工作得很好)。

这是我的 View 文件:

var app = app || {};

app.WalletView = Backbone.View.extend({

    el: '#page',

    template: Handlebars.getTemplate( 'wallet' ),

    events: {
        'click #camera-snap': 'getPhoto'
    },

    initialize: function() {
        this.render();
    },

    // render library by rendering each book in its collection
    render: function() {
        this.$el.html( this.template() );
        return this;
    },

    getPhoto: function(e) {
        var $img = this.$el.find('img#camera-image');
        console.info('Taking Photo');
        /*
         | BASED ON: http://stackoverflow.com/a/11928792/633056
         */
        navigator.camera.getPicture(
            function(data) {
                $img.show();
                alert(data);  // <-- success alert
                //img.src = "data:image/jpeg;base64," + data;
                $img.attr('src', "data:image/jpeg;base64," + data);
                $('#camera-status').text("Success");
            },
            function(e) {
                console.log("Error getting picture: " + e);
                $('camera-status').innerHTML = e;
                //dom.byId('camera-image').style.display = "none";
            },
            // must be DATA_URL to return the data for future use
            {quality: 50, destinationType: navigator.camera.DestinationType.DATA_URL, sourceType : navigator.camera.PictureSourceType.CAMERA}
        );
    }

});

这就是我启动该 View 的方式:

'showWallet': function() {
    new app.WalletView();
},

这是 HTML 模板:

<h1>Camera POC</h1>
<p>Camera Status: <i id="camera-status"></i></p>
<input type="submit" value="Take Picture" id="camera-snap">
<img src="" id="camera-image" style="width: 80%;">

点击 input#camera-snap 按钮会弹出原生相机界面。然后我可以拍照并(在 Android 上)单击勾选按钮(在 native 界面中)。但是，当我返回到 Hybrid 应用程序时，什么也没有发生。

我希望我的成功回调中的 alert() 弹出带有大量 BASE64 数据的字符串(就像不在 Backbone 中时一样。

我做错了什么？

Answer 1

你能在 $img.show() 调用之前的成功回调中添加一个 console.log($img) 吗？

var $img = this.$el.find('img#camera-image');
        console.info('Taking Photo');

        navigator.camera.getPicture(
            function(data) {
                console.log($img);     // <-- new console.log
                $img.show();
                alert(data);  
                ....
            },
            function(e) {
                ....
            },
            ....
        );
    }

可能是因为 $img 变量在成功回调的范围内不可见，因此您的 javascript 在到达警报之前就死了。