Question

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

以下代码位于交叉路由器的“extension.js”上。安装后，在控制台调试我得到这个错误：未捕获的ReferenceError：未定义YUI

代码：

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

}）;

一些帮助？

Answer 1

您的代码存在两个问题。

正如@Knollbert所提到的，你有一个同步性问题，可以使用Crossrider的appAPI.dom.addRemoteJS方法使用回调注入和构建你的UI来解决。
当您将远程脚本加载到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）并注入它来整理注入 inlineJS 的代码。使用appAPI.resources.addInlineJS，如下：

<强>的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员工]

Answer 2

问题是浏览器尚未解析/加载YUI脚本有关解决方案，请参阅document.createElement("script") synchronously。

未定义YUI - 在js文件中创建全部

2 个答案: