将数据从服务器端传递到YUI 3 JavaScript应用程序 [英] Pass data from server-side to YUI 3 JavaScript application

问题描述

我正在将我的应用程序从YUI 2重写为YUI 3.

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

有时候，我需要JavaScript环境中来自数据库的一些数据. Firs选项是在JavaScript中分配一些全局变量，但是全局vars不好，所以我在YUI 2中做了以下操作:

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

?>

如您所见，我使用公共方法" YAHOO.MyApp.initUserInfo和YAHOO.MyApp.initCurrencyRates将数据传递到JavaScript代码中.

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

现在我要用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>';
?>

如何在我的YUI 3 JavaScript代码中提供公共方法"? 或者是在具有全局变量的JavaScript应用程序代码中传递数据的另一种解决方案是什么?

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?

推荐答案

您有一些选择:

1)YUI沙箱中的代码可以访问沙箱外部的变量，因此只需将数据存储在某个位置并在沙箱代码中引用它即可.这仅适用于数据，不适用于调用方法.

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.

请注意，这不涉及任何形式的通知，因此要由YUI沙箱中的代码来确定何时有数据可用.

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)使用共享的全局EventTarget Y.Global(又名YUI.Env.globalEvents)广播沙盒内事件订阅收到的消息.

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.

这使您可以对页面上的数据添加进行功能响应，但是如果PHP在构建页面标记时生成货币数据，则该功能不起作用，因为这是失败的竞争条件.

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)如果要静态传递数据，并且PHP在调用YUI()之前在页面组装期间添加了数据，则只需将其包装在模块中并使用().

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

您还有其他选项，具体取决于数据传输的时间以及页面与传递数据的php之间的关系.一周之内在freenode上#yui停下来，将会有很多人为您找到最佳解决方案.

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.

这篇关于将数据从服务器端传递到YUI 3 JavaScript应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！