2016-10-03 38 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> 

很明顯,你可以使用任何其他依賴裝載系統作爲一種替代方法,但是這肯定會使客戶端執行的方式與服務器上的相同。