Javascript Module Pattern confusion

Question

I am trying to use the Javascript Module pattern. I want my module to have a public method that can be called when a json file is loaded. In this simple example, the module loads the json on init and (should) load an image into a DOM element when the public method 'loadPic' is called. The source of the image is in the json file.) When I run the script the first time, I get the following error: Uncaught TypeError: Cannot read property 'src' of undefined. My interpretation is that the method 'loadPic' is called automatically, before the data is loaded... but I don't know how to prevent that. Here is the code (PS: I am using Zepto, the 'light' version of jQuery):

<!-- language: lang-js -->
/* in module file: DualG.js */
;(function ($) {
    $.extend($.fn, {
        DualG: function (element, options) {
        var defaults = { // not used yet...
            indexStart:0,
            url: 'js/data.json'
        },
            my = {},
            init,
            loadPic,
            plugin = this;

        plugin.settings = {};
        plugin.pics = [];

        init = function () {
            plugin.settings =  $.extend{}, defaults, options);
            $.getJSON(plugin.settings.url, function (data) {
                var l = data.images.length, i;
                for (i = 0; i < l; i = i + 1) {
                    plugin.pics[data.images[i].index] = data.images[i];
                }
            });

        init();

        my.loadPic = function (index, container) {
            $(container).empty().append($("<img>").attr({"src":plugin.pics[index].src}));
        };

        return my;
     }
  });
}(Zepto));

Hi Katspaugh - thank you for answering. But are you sure? From zeptojs.com : Creating plug-ins
Plugins can be written by adding methods as properties of $.fn:
;(function($){ $.extend($.fn, { foo: function(){ // `this` refers to the current Zepto collection. // When possible, return the Zepto collection to allow chaining. return this.html('bar') } }) })(Zepto) — Regis Zaleman, Dec 21 '12 at 20:20
"When I run the script the first time, I get the following error: Uncaught TypeError: Cannot read property 'src' of undefined. My interpretation is that the method 'loadPic' is called automatically, before the data is loaded... " Why do you think that? Have you debugged your script? — Aaron Kurtzhals, Dec 21 '12 at 20:21
@AaronKurtzhals - when I try to use this script, I get this error in the console. I call the script on dom ready. It seems to call the method 'loadPic' before I explicitly call it myself... — Regis Zaleman, Dec 21 '12 at 20:24
You know what the console is, that's good. Now, to make a step further, your console should have this "Break on all exceptions" button, which would let you inspect your code in runtime (it's called debugging). Try to look at the call stack to see what's really happening. http://youtu.be/c_oiQYirKuY — katspaugh, Dec 21 '12 at 20:29

score 1 · Answer 1 · answered Dec 21 '12 at 20:48

My problem was that data is loaded a-synchronistically - so I was tying to use data that was not loaded yet. I added an event trigger in the init, after loading the data. Then, I listen to the event and call the loadPic method only then... Thanks all for your help.

Javascript Module Pattern confusion

1 Answers1