我們如何在腳本標簽中正確使用聚合物屬性？

Question

在基於與socket.io的連接之上構建的Web組件上工作，但是我們希望用戶能夠從服務器鏈接到他們自己的socket.io版本。 使用以下腳本：

<script src$="{{socketIp}}/socket.io/socket.io.js"></script>

定義了socketIp ，頁面可以很好地加載它。 一個示例是“ http：// localhost：8080 ”

使用src=將給出404並在網址中打印出“ {”。 使用src$=似乎是正確的處理方式，因為它可以成功加載鏈接。

然后在附件上引用io但會導致Uncaught ReferenceError: io is not defined 。

直接輸入鏈接可以正常工作，但用作變量時不起作用。 我們還嘗試使用超時，以防尚未加載而又無法正常工作的問題。

有什么建議么？

Answer 1

使用on-load="METHOD"綁定到<script>的load事件，其中METHOD是您的Polymer對象上METHOD的名稱。 應該在該回調方法中定義socket.io 。

此示例將onScriptLoad()和onScriptError()綁定為<script>的on-load和on-error回調：

<dom-module id="x-foo">
  <template>
    <script src$="{{src}}"
            on-load="onScriptLoad"
            on-error="onScriptError"></script>
  </template>
  <script>
    Polymer({
      is: 'x-foo',
      onScriptLoad: function() {
        console.log('script loaded');
      },
      onScriptError: function(e) {
        console.log('script err:', e);
      }
    });
  </script>
</dom-module>

 <head> <base href="https://polygit.org/polymer+:master/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.6/socket.io.min.js"></x-foo> <dom-module id="x-foo"> <template> <script src$="{{src}}" on-load="onScriptLoad" on-error="onScriptError"></script> </template> <script> Polymer({ is: 'x-foo', onScriptLoad: function() { console.log('socket.io:script loaded'); var socket = io.connect('http://localhost'); socket.on('connect', function(e) { console.log('socket.io:connected:', e); }) .on('connect_error', function(e) { console.log('socket.io:connection error:', e.message); }) .on('news', function(data) { console.log('socket.io:news:', data); }); }, onScriptError: function(e) { console.log('socket.io:script err:', e); } }); </script> </dom-module> </body>

^jsbin

Answer 2

只需強制性地加載腳本：

var e = document.createElement('script');
e.src = ip + '/socket.io/socket.io.js';
e.async = true;
document.body.appendChild(e);
e.onload = function() {
  // work with socket.io
};

我們如何在腳本標簽中正確使用聚合物屬性？

問題描述

2 個解決方案

解決方案1
1 2016-05-23 06:52:06

解決方案2
0 2016-05-22 17:23:06

我們如何在腳本標簽中正確使用聚合物屬性？

問題描述

2 個解決方案

解決方案1 1 2016-05-23 06:52:06

解決方案2 0 2016-05-22 17:23:06

解決方案1
1 2016-05-23 06:52:06

解決方案2
0 2016-05-22 17:23:06