Pass data from server-side to YUI 3 JavaScript application

Question

I am working on rewriting my application from YUI 2 to YUI 3.

Sometimes I need some data from database in my JavaScript environment. Firs option is to assign some global variables in JavaScript, but global vars is not good, so I did following in YUI 2:

app.js

YAHOO.namespace('MyApp');

    YAHOO.MyApp = function() {

    var currencyRates;
    var userInfo;

    /*
    here a lot of code with event listeners and dom manipulations which uses currencyRates and userInfo variables
    */

    return {
        initCurrencyRates: function(newRates) { currencyRates = newRates; },
        initUserInfo: function(newUserInfo) { userInfo = newUserInfo; },
    }

}();

PHP

<?php
$currencyRates = array('EUR' : 1.3245, 'GBP': 1.4322, 'RUB': 0.02334); //actually it comes from database
print '<script>YAHOO.MyApp.initCurrencyRates(' . json_encode($currencyRates) . ')</script>';

$userInfo = array('Name' => 'Jhon', 'ID' => 10); //actually it comes from database
print '<script>YAHOO.MyApp.initUserInfo(' . json_encode($userInfo) . ')</script>';

?>

As you can see I use "public methods" YAHOO.MyApp.initUserInfo and YAHOO.MyApp.initCurrencyRates to pass data into JavaScript code.

Now I what to rewrite it using YUI 3:

app.js

YUI().use('node', 'event', function(Y) {

    var currencyRates;
    var userInfo;

    /*
    here a lot of code with event listeners and dom manipulations which uses currencyRates and userInfo variables
    */

})

PHP

<?php
$currencyRates = array('EUR' : 1.3245, 'GBP': 1.4322, 'RUB': 0.02334); //actually it comes from database
print '<script>???</script>';
?>

How do I provide "public methods" in my YUI 3 JavaScript code? Or what is another solution to pass data inside JavaScript application code aviding global variables?

Answer 1

You have a few options:

1) Code inside YUI sandboxes has access to variables outside the sandbox, so just store the data somewhere and reference it inside your sandbox code. This only works with data, not calling methods.

Note, this doesn't involve notification of any sort, so it's up to the code in the YUI sandbox to know when the data is available.

// PHP
print '<script>YUI.namespace('Env.MyApp.data').currencyRates = ' . json_encode($currencyRates) . ';</script>';

// YUI (inside the YUI().use() callback)
var currencyData = YUI.Env.MyApp.data.currencyData;

Technically, with this approach, you could put the data anywhere globally accessible and it would work.

2) Use the shared global EventTarget Y.Global (aka YUI.Env.globalEvents) to broadcast a message that is received by an event subscription inside your sandbox.

This allows you to have a function response to the addition of data to the page, but doesn't work if the PHP generates the currency data while building the markup for the page because that's a failed race condition.

// PHP
print "<script>YUI.Env.globalEvents.fire('myapp:data', { currencyRates: " . json_encode($currencyRates) . " });</script>";

// YUI
Y.Global.on('myapp:data', function (e) {
    // the data is in e.currencyRates
});

3) If the data is meant to be delivered statically and the PHP is adding it during page assembly before the YUI() call, just wrap it in a module and use() it.

// PHP
print "<script>YUI.add('myapp-currency-rates', function (Y) { Y.namespace('MyApp.data').currencyRates = " . json_encode($currencyRates) . "; });</script>";

// YUI
YUI().use('myapp-currency-rates', … function (Y) {
    // the data is in Y.MyApp.data.currencyRates
});

And you have other options depending on the timing of the data transfer and relationship between the page and the php delivering the data. Stop by #yui on freenode during the week and there will be plenty of people to help figure out the best solution for you.