Передача данных из серверной части в JavaScript-приложение YUI 3 - PullRequest
Новая
       11

Передача данных из серверной части в JavaScript-приложение YUI 3

2 голосов
/ 02 февраля 2012

Я работаю над переписыванием своего приложения с YUI 2 на YUI 3.

Иногда мне нужны данные из базы данных в моей среде JavaScript.Первый вариант - назначить некоторые глобальные переменные в JavaScript, но глобальные переменные не годятся, поэтому я выполнил следующее в 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>';

?>

Как вы видите, я использую "открытые методы" YAHOO.MyApp.initUserInfo и YAHOO.MyApp.initCurrencyRates для передачи данных в код JavaScript.

Теперь мне, что переписать, используя 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>';
?>

Как мне предоставить "публичные методы" в моем коде JavaScript YUI 3?Или как еще можно передать данные в коде приложения JavaScript, используя глобальные переменные?

1 Ответ

0 голосов
/ 04 февраля 2012

У вас есть несколько вариантов:

1) Код внутри песочниц YUI имеет доступ к переменным вне песочницы, поэтому просто храните данные где-нибудь и ссылайтесь на них внутри кода своей песочницы.Это работает только с данными, а не с вызовами методов.

Обратите внимание, что это не требует каких-либо уведомлений, поэтому код в изолированной программной среде YUI должен знать, когда данные доступны. 

// 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;

Технически, при таком подходе вы можете разместить данные в любом месте, доступном для всего мира, и это будет работать.

2) Используйте совместно используемую глобальную EventTarget Y.Global (она же YUI.Env.globalEvents) для трансляциисообщение, полученное по подписке на события внутри вашей песочницы.

Это позволяет получить ответ функции на добавление данных на страницу, но не работает, если PHP генерирует данные валюты при построенииразметка для страницы, потому что это условие неудавшейся гонки. 

// 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) Если данные предназначены для статической доставки и PHP добавляет их во время сборки страницы перед вызовом YUI (), просто обернитеэто в модуле и использовать () его. 

// 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
});

И у вас есть другие варианты в зависимости от времени передачи данных и отношения бмежду страницей и php, доставляющим данные.Зайдите на #yui на freenode в течение недели, и найдется много людей, которые помогут найти лучшее решение для вас.

...