I've defined a module (module1) which is supposed to load the value of a property asynchronously. How can I use this property in my app as soon as it is defined and only after it is defined?

My setup (simplified)
=====================

v1
--

***app.js***

```
require(['module1'], function(mod) {
    document.getElementById("greeting").value = mod.getPersonName();
});

```

***module1.js***

```
define(['jquery'], function($) {
    _person;

    $.get('values/person.json')
        .done(function(data) {
            _person = data
        });

    return {
        getPersonName: function() { return _person.name; }
    }

```

***values/person.json***

```
{ name: 'John Doe', age: 34 }    

```

This only works if the GET happens nearly instantaneously, otherwise it fails because \_person is undefined when getPersonName is called.

v2
--

To counter this, I figured I would register a callback to notify the app when person was loaded.

***app.js***

```
require(['module1'], function(mod) {
    mod.onPersonLoaded(function() {
        document.getElementById("greeting").value = mod.getPersonName();
    });
});

```

***module1.js***

```
define(['jquery'], function($) {
    _person;
    _onLoaded;

    $.get('values/person.json')
        .done(function(data) {
            _person = data;
            _onLoaded();
        });

    return {
        getPersonName: function() { return _person.name; },
        onPersonLoaded: function(cb) { _onLoaded = cb; }
    }
}

```

This works if the GET is slow, however, if it's quick \_onLoaded is undefined when `.done()` is called.

Is there a good way to use \_person values in app.js as soon as they are defined and only once they are defined?

I'm using RequireJS, but my question is generally applicable to AMD.

Edit
====

In simplifying my example, I removed a layer which may be important. I'm using RactiveJS for the UI.

Setup (slightly less simplified)
--------------------------------

***app.js***

```
require(['Ractive', 'module1'], function(Ractive, mod) {

    var ractive = new Ractive({
        ...
        data : {
            name: mod.getPersonName()
        }
    });

    ractive.observe(...);
    ractive.on(...);

});

```

Edit 2
======

My current solution, subject to change. Register a callback that notifies app.js when person is loaded. Callback is called immediately if person is already loaded when callback is registered.

***app.js***

```
require(['Ractive', 'module1'], function(Ractive, mod) {

    var ractive = new Ractive({
        ...
        data : {}
    });

    mod.watchPerson(function() {
        ractive.set('person.name', mod.getPersonName());
    });

    ractive.observe(...);
    ractive.on(...);

});

```

***module1.js***

```
define(['jquery'], function($) {
    _person;
    _onLoaded;

    $.get('values/person.json')
        .done(function(data) {
            _person = data;
            try {
                _onLoaded();
            } catch (e) {
                // that was fast!
                // callback will be called when it is registered
        });

    return {
        getPersonName: function() { return _person.name; },
        watchPerson: function(cb) { 
            _onLoaded = cb;
            if(_person != null) {
                _onLoaded();
            }
        }
    }
}

```