Библиотека YUI - Лучший способ сохранить глобальную ссылку на объект?

Question

Я пытаюсь использовать библиотеку истории пользовательского интерфейса Yahoo. Я не вижу отличного способа избежать оборачивания всего содержимого моей функции с помощью Y.use, чтобы я мог получить доступ к объекту истории. Я попытался объявить это глобально вне команды use (), но это, похоже, не сработало. Если вы посмотрите на мои методы showDashboard () и showReport1 (), вы увидите, что я обертываю содержимое, которое кажется избыточным, чтобы делать это для каждой функции, которая использует историю. Есть лучший способ сделать это?

Все примеры Yahoo, которые я видел, не содержат функций вообще и держат весь образец в единственном методе использования.

 <div>
        <a href="#" onclick="showDashboard(); return false;">Dashboard</a> | 
        <a href="#" onclick="showReport1(); return false;">Report 1</a>
    </div>
    <script type="text/javascript">
        // Global reference to Yahoo UI object
        var Y = YUI();       

        function showDashboard() {
            Y.use('*', function (Y) {
                var history = new Y.HistoryHash();
                history.addValue("report", "dashboard");
            });
        }

        function showReport1() {
            Y.use('*', function (Y) {
                var history = new Y.HistoryHash();
                history.addValue('report', "report1");  
                //var x = { 'report': 'report1', 'date': '11/12/2012' };
                //history.addValue("report", x);

            });
        }

        Y.use('history', 'tabview', function (Y) {
            var history = new Y.HistoryHash();
            var tabview = new Y.TabView({ srcNode: '#demo' });

            // Render the TabView widget to turn the static markup into an
            // interactive TabView.
            tabview.render();

            // Set the selected report to the bookmarked history state, or to
            // the first report if there's no bookmarked state.
            tabview.selectChild(history.get('report') || 0);

            // Store a new history state when the user selects a report.
            tabview.after('selectionChange', function (e) {
                // If the new tab index is greater than 0, set the "tab"
                // state value to the index. Otherwise, remove the "tab"
                // state value by setting it to null (this reverts to the
                // default state of selecting the first tab).
                history.addValue('report', e.newVal.get('index') || 0);
            });

            // Listen for history changes from back/forward navigation or
            // URL changes, and update the report selection when necessary.
            Y.on('history:change', function (e) {                
                // Ignore changes we make ourselves, since we don't need
                // to update the selection state for those. We're only
                // interested in outside changes, such as the ones generated
                // when the user clicks the browser's back or forward buttons.
                if (e.src === Y.HistoryHash.SRC_HASH) {
                    if (e.changed.report) {
                        // The new state contains a different report selection, so
                        // change the selected report.
                        tabview.selectChild(e.changed.report.newVal);
                    } else if (e.removed.report) {
                        // The report selection was removed in the new state, so
                        // select the first report by default.
                        tabview.selectChild(0);
                    }
                }

                if (e.changed.report) {
                    alert("New value: " + e.changed.report.newVal);
                    alert("Old value: " + e.changed.report.prevVal);
                }
            });
        });
    </script>
    </form>
</body>
</html>

Answer 1

Вместо использования простой функции при нажатии, присоединяйте обработчики с помощью YUI. Если вы можете изменить код HTML - добавьте в ссылки идентификатор или класс, например

<a id="btnShowDashboard" href="#">Dashboard</a>

Затем в вашем пользовании () добавьте обработчик клика к кнопкам

Y.use('history', 'tabview', 'node', 'event', function (Y) {

  var bntShowDashboard = Y.one('#btnShowDashboard');
  if (bntShowDashboard) {
    bntShowDashboard.on('click', function(e) {
      e.preventDefault();
      var history = new Y.HistoryHash();
      history.addValue("report", "dashboard");
    });
  }

...
})

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