Мой виджет, созданный с использованием OpenComponents, не использует клиентскую сторону логики JavaScript

Я пытаюсь создать виджет, используя реагировать и 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>

мой пакет.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"
    }
  });
};

Спасибо

Источник

1 ответ

Я пытаюсь приложить некоторые усилия здесь: 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>

Очевидно, что вы можете использовать любую другую систему загрузки зависимостей в качестве альтернативного подхода, но это, безусловно, должно заставить выполнение на стороне клиента работать так же, как на сервере.

Источник
Другие вопросы по тегам