2016-10-03 26 views
3

我尝试使用反应和OpenComponents创建一个小部件,当我尝试使用我的部件客户端反应部分加载正确,但JavaScript逻辑doesn没有工作。我的小工具创建OpenComponents不使用是JavaScript逻辑客户端

我看着控制台,我没有错误信息。之前使用反应我试着用把手我有问题。我也尝试使用它服务器端它的工作完美。

这是我的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" 
    } 
    }); 
}; 

感谢

回答

3

我试图把一些努力在这里:https://github.com/opentable/oc/issues/299

在任何情况下(只是为了保持堆栈溢出的问题上的最新) - 这是一个很常见的情况。虽然在现代浏览器中并行下载脚本标记列表,但执行很可能按照正确的顺序进行。所以,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> 

很明显,你可以使用任何其他依赖装载系统作为一种替代方法,但是这肯定会使客户端执行的方式与服务器上的相同。

相关问题