0

我正在尝试在 Crossrider 应用程序中测试一些 YUI3 示例，因此我需要在 JS 文件中创建所有示例。我不知道是否添加了错误或失败的原因

以下代码位于 crossrider 的“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 提到的，您有一个同步问题，可以通过Crossrider 的appAPI.dom.addRemoteJS方法使用回调注入和构建您的UI 来解决。
  2. 当您将远程脚本加载到 HTML 页面的范围（DOM）并尝试从尚未定义的扩展范围内调用它（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的代码，如下所示：

脚本.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);
});;

扩展.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 回答
0

问题是浏览器尚未解析/加载 YUI 脚本。有关一些解决方案，请同步
查看document.createElement("script")。

于 2013-10-29T18:20:51.730 回答