3

我尝试使用 react 和 OpenComponents 创建一个小部件，当我尝试使用我的小部件客户端时，反应部分正确加载，但 javascript 逻辑不起作用。

我查看控制台，没有错误消息。在使用react之前，我尝试使用车把，但我遇到了问题。我也尝试在服务器端使用它，它工作得很好。

这是我的 index.html

<html>
<head>
    <link rel="stylesheet" href="css/mycss.css">
    <title>Widget</title>
</head>
<body>
<script>
    var oc = {conf: {debug: true}};
</script>
<script src="http://localhost:3030/oc-client/client.js"></script>
<script src="js/header.js"></script>
<script src="js/app.js"></script>
<oc-component href="http://localhost:3030/mywidget"></oc-component>
</body>
</html>

我的组件

<script src="{{path}}js/app.js" language="JavaScript" type="text/javascript"></script>
<div id="magnet"></div>
<script src="{{path}}js/index.js" language="javascript" type="text/javascript"></script>

我的 package.json

{
  "name": "mywidget",
  "description": "",
  "version": "1.0.0",
  "repository": "",
  "oc": {
    "files": {
      "data": "server.js",
      "template": {
        "src": "template.html",
        "type": "handlebars"
      },
      "static":["js"]
    }
  }
}

和我的 server.js

'use strict';

module.exports.data = function(context, callback){

  callback(null, {
    path:context.staticPath,
    init: {
      to: context.params.to || 7015400,
      from: context.params.from || 8727100,
      depart: context.params.depart || '01/01/1900',
      return: context.params.return || '01/01/1901',
      point_of_sale: context.params.point_of_sale || "XXXXX"
    }
  });
};

谢谢

4

1 回答 1

3

我正在尝试在这里付出一些努力：https ://github.com/opentable/oc/issues/299

无论如何（只是为了使 Stack Overflow 问题保持最新） - 这是一个非常常见的情况。虽然在现代浏览器中并行下载脚本标签列表，但执行很可能会以正确的顺序发生。所以，A.js 会先执行，B.js 会后执行，如果 B 依赖于 A 就可以了。

在客户端，当在 DOM 中注入相同的东西时，情况可能会有所不同。为了保证以正确的顺序执行，在 OC 中您可以尝试以下操作：

代替

<script src="a.js"></script>
<script src="b.js"></script>

和

<script>
  //Following is to guarantee this works if either this is client-side rendered
  // or server-side rendered - so if the oc namespace is available already or not
  window.oc = window.oc || {};
  oc.cmd = oc.cmd || [];

  // Here you require the 2 files in the right order
  oc.cmd.push(function(){
    oc.require('a.js', function(){
      oc.require('b.js', function(){
        console.log('now all should be ok');
      });
    });
  });
</script>

显然，您可以使用任何其他依赖加载系统作为替代方法，但这肯定会使客户端执行以与服务器上相同的方式工作。

于 2016-10-05T11:08:44.393 回答