使用聚合物和requirejs

在試圖創建使用requirejs模塊的聚合物元素時，我遇到了阻塞issue。據我所知，聚合物不適用於requirejs，但暫時這是我唯一的選擇。使用聚合物和requirejs

尋找答案，我發現兩個解決方案：

不要使用requirejs，使您的模塊與HTML進口兼容。
將Polymer()呼叫requirejs回調中所描述的here

因爲我必須使用需要，至少暫時，我去解決二號。但是，事實證明該解決方案會導致元素註冊異步延遲，並導致incorrect data binding prior to Polymer upgrading the element。

深入研究這個問題，我開始黑客入侵未記錄的Polymer內部組件，意圖完全停止Polymer，直到requirejs完成它的事情。這是我想出了：

Polymer.require = function(tag, deps, func) { 
    var stopper = {} 
    Polymer.queue.wait(stopper); 
    require(deps, function() { 
     delete stopper.__queue; 
     Polymer.queue.check(); 
     Polymer(tag, func.apply(this, arguments)); 
    }); 
};

我知道這是非常錯誤的。有更好的解決方案嗎？

來源

2014-09-24 Aki

我發現如果我在Polymer腳本中嵌入要求的呼叫，我會避免這個問題。

<link rel="import" href="../polymer/polymer.html"/> 
<script src="../requirejs/require.js"></script> 
<script src="../something/something.js"></script> 

<polymer-element name="some-component"> 
    <template>...</template> 
    <script> 
    (function() { 
     Polymer('some-component', { 
      someMethod: function() { 

       require(['something'], function (Something) { 
        var something = new Something(); 
        ... 
       } 
     } 
    )(); 
    </script> 
</polymer-element>

來源

2015-01-30 22:40:34

這留下了什麼問題，你在哪裏調用'require.config'，看到這個類似的[線程]（http://stackoverflow.com/questions/28673242/manual-bootstrap-in-polymer） – Renaud 2015-02-23 11:59:54

因此，有this solution斯科特英里，但我覺得這是一個有點簡單化和不靈活的，因爲它依賴於：

<script>標籤才能被執行，因此排除：
- async script tags
- xhr based script loading
polymer得到從<script>標籤加載，因此：
- layout.html並不會加載相關css
- 任何將來調用polymer.htmlwon't be deduped

如果您想了解更多控制您的引導邏輯，您將需要在組件之間實施一定程度的同步（這是requirejs和polymer競爭做的）在這些完全加載之前。

前面的示例是更具說明性的（讀取polymer）做事方式，但缺少細粒度調整。我已通過started working on a repository向您展示如何通過使用更重要的方法完全自定義您的加載順序，其中requirejs優先協調引導的其餘部分。

在寫這篇文章的時候，這個額外的控制的性能更差，因爲各種腳本無法並行加載，但我仍在努力優化它。

來源

2015-03-18 16:52:23 Renaud

使用聚合物和requirejs

回答

相關問題