YUIライブラリ - オブジェクトへのグローバル参照を保持する最良の方法は？

Question

私はyahoo uiの履歴ライブラリを使用しようとしています。私は履歴オブジェクトにアクセスできるように、すべての関数の内容をY.useでラップするのを避けるための素晴らしい方法はありません。私はuse（）コマンドの外でそれをグローバルに宣言しようとしましたが、これはうまくいかないようです。 showDashboard（）メソッドとshowReport1（）メソッドを見ると、内容をラップしていることがわかります。これは、履歴を使用するすべての関数でこれを行う必要があるようです。これを行うより良い方法はありますか？

私が見たyahooの例は、まったく機能しておらず、サンプル全体を1回の使用方法で保持しています。

<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コードを変更することができる場合 - その後、あなたの使用中の（）ボタン

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

... 
}) 

にクリックハンドラを追加する例

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

のために、リンクにあなたがなりますそのようにIDやクラスを追加実行の瞬間より "歴史"が読み込まれていることを確認してください。 しかし、1つの欠点があります.YUIモジュールがロードされるまで、リンクをクリックすると何も起こりません。