0

Crossrider アプリでいくつかの YUI3 の例をテストしようとしているので、JS ファイルですべてを作成する必要があります。何かが間違って追加されたのか、何が失敗なのかわかりません

次のコードは、クロスライダーの「extension.js」にあります。インストール後、コンソールでデバッグすると、次のエラーが表示されます: Uncaught ReferenceError: YUI is not defined

コード：

var js = document.createElement("script");
js.setAttribute("src","http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js");

document.head.appendChild(js);
document.body.setAttribute("class","yui3-skin-sam");

var div = document.createElement("div");
div.setAttribute("id","demo");
document.body.appendChild(div);

YUI().use('tabview', function(Y) {
    var tabview = new Y.TabView({
    children: [{
        label: 'foo',
        content: '<p>foo content</p>'
    }, {
        label: 'bar',
        content: '<p>bar content</p>'
    }, {
        label: 'baz',
        content: '<p>baz content</p>'
    }]
});

tabview.render('#demo');
tabview.selectChild(2);

});

手助け？

4

2 に答える 2

1

コードには 2 つの問題があります。

  1. @Knollbert が述べたように、クロスライダーのappAPI.dom.addRemoteJSメソッドでコールバックを使用して UI を注入および構築することで解決できる同期性の問題があります。
  2. リモート スクリプトを HTML ページのスコープ (DOM) にロードし、それが定義されていない Extension スコープ内から呼び出そうと (YUI) しているため、スコープに問題があります。

次のextension.jsコードを使用して両方の問題を解決できます (また、jQuery を使用して要素を挿入します)。

appAPI.ready(function($) {
  appAPI.dom.addRemoteJS("http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js", function() {
    $('body').addClass('yui3-skin-sam');
    $('<div id="demo">').appendTo('body');

    var script =
      "YUI().use('tabview', function(Y) {" +
      "  var tabview = new Y.TabView({" +
      "    children: [{" +
      "      label: 'foo'," +
      "      content: '<p>foo content</p>'" +
      "    }, {" +
      "      label: 'bar'," +
      "      content: '<p>bar content</p>'" +
      "    }, {" +
      "      label: 'baz'," +
      "      content: '<p>baz content</p>'" +
      "    }]" +
      "  });" +
      "  tabview.render('#demo');" +
      "  tabview.selectChild(2);" +
      "});";

    appAPI.dom.addInlineJS(script);
  });
});

さらに、次のように、スクリプト変数の内容でリソース ファイル (script.js など) を作成し、appAPI.resources.addInlineJSを使用してそれを注入することにより、 inlineJSを注入するコードを整理できます。

script.js

YUI().use('tabview', function(Y) {
  var tabview = new Y.TabView({
    children: [{
      label: 'foo',
      content: '<p>foo content</p>'
    }, {
      label: 'bar',
      content: '<p>bar content</p>'
    }, {
      label: 'baz',
      content: '<p>baz content</p>'
    }]
  });
  tabview.render('#demo');
  tabview.selectChild(2);
});;

extension.js

appAPI.ready(function($) {
  appAPI.dom.addRemoteJS("http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js", function() {
    $('body').addClass('yui3-skin-sam');
    $('<div id="demo">').appendTo('body');
    appAPI.resources.addInlineJS('script.js');
  });
});

[免責事項:私は Crossrider の従業員です ]

于 2013-10-30T09:09:48.670 に答える