有沒有人成功地將聚合物元素添加到Meteor項目中？我努力使它工作。流星應用中的聚合物元素

我一直在使用的涼亭下，公立安裝聚合物包嘗試：

├── public 
│   ├── bower_components 
│   │   ├── platform 
│   │   └── polymer 
│   ├── elements 
│   │   └── my-element.html

我則包含這樣的元素：這是導致XHR請求一個無限循環

<head> 
    <title>test</title> 
    <script src="bower_components/platform/platform.js"></script> 
    <link rel="import" href="elements/my-element.html"> 
</head> 
<body> 
    ... 
    <my-element></my-element> 
    ... 
</body>

platform.js和my-element.html。

我也試過meteor-polymer包，不包括polymer.html，我無法得到它認識到無論如何包裝：

=> Errors prevented startup: 

While building the application: 
error: no such package: 'polymer'

我希望有人已經能讓聚合物與Meteor合作，因爲我真的很想在這個應用程序中使用我的組件。

來源

2014-02-13 jamstooks

你真的很酷，你正在試驗聚合物。然而，在我的愚見中，「流星的方式」非常依賴於模板 - 稍微有點耐心，Meteor和Angular（以及其他人）看起來更像Polymer。 – dalgard

與@dalgard達成一致意見，Meteor的Blaze UI有一些令人興奮的功能，可以使它成爲一個強大的組件系統。流星做了很多棘手的事情，使其反應HTML模板的工作，所以我不知道什麼時候/如果與聚合物的兼容性將/可能是這樣的可能。我會懷疑你最好的選擇是完全繞過流星的模板引擎，並以聚合物支持它的任何方式將它自己掛鉤。但是請注意：您是使用隕石還是試圖用香草流星安裝包裝？閱讀：https://atmosphere.meteor.com/wtf/app – sbking

@dalgard，我想我正在更多地嘗試Meteor，並希望我可以重新使用一些Polymer元素。 – jamstooks

對不起，聽說你一直無法讓Meteor和Polymer一起玩。上面的評論解釋了Meteor的模板系統的情況，但如果它有用的話：

在聚合物團隊結束時，我們創建了一個名爲Vulcanize的工具，它可以將聚合物元素所需的所有樣式，腳本和依賴關係（連接）成一個文件。這消除了對任何XHR/Ajax調用的需要，除非某個元素正在調用某處的遠程服務器。

這是guide使用Vulcanize工具，它可能能夠幫助上述。

來源

2014-02-16 14:46:35 addyo

謝謝，@addyo。聽起來很有希望，但我一直在研究這一點，並開始認爲這是不值得的。用你的技術，我得到如下錯誤：'bower_components/polymer-selection/index.html：1：無法在這裏設置DOCTYPE。（Meteor爲你設置<！DOCTYPE html>）'我想我會重寫Meteor中的元素，或者嘗試與Angular結合使用外部數據綁定。 – jamstooks

你爲什麼要結合角？大火已經處理數據綁定。 – dcsan

我正在考慮將Polymer添加到_src目錄，因爲它沒有被Meteor – Viktorminator

我也有玩過這兩個。它不那麼漂亮，但我會一起工作。

<head> <title>my-app</title> <script src="/polymer/platform.js"></script> <link rel="import" href="/polymer/polymer.html"> </head>

所以

在我的公共目錄

/public/polymer/polymer.html 
/public/polymer/other-polymer-files

流星聚合物包是出日期

來源

2014-03-10 16:29:34 mervasdayi

這不起作用 – Chet

雖然是一個隕石包聚合物（https://atmospherejs.com/package/polymer），其似乎很有希望

如果要自己添加JavaScript文件，你可能會想嘗試把他們下：

client/compatibility/

如果你不這樣做，你將不能訪問聚合物的全局變量，因爲在正常的javascript全局變量只是在任何函數之外創建的var myGlobal;變量。

我很好奇流星是如何解決模板的聚合物手柄狀語法的。

來源

2014-04-29 00:57:43

我已經創建了一個軟件包來爲Meteor添加Polymer功能。

這是github。

http://github.com/ecwyne/meteor-polymer

更新：它也可以使用meteor add ecwyne:polymer-elements

來源

2014-07-21 16:52:25 ECWyne

這是否適用於Meteor 0.9.0.1？我遵循了這些步驟，但是我得到了「Uncaught HierarchyRequestError：未能在'Node'上執行'appendChild'：'HTML'類型的節點可能不會被插入'#document'類型的節點中。在瀏覽器中。 – babbata

@babbata這個包已經更新，現在可以與新的流星包裝系統一起使用！ – ECWyne

@ECWyne：對不起，在這裏標記你..請結帳這個問題http://stackoverflow.com/q/28877940/1560616 –

@jamstooks 加入我有相同的文件夾結構喜歡你，有同樣的煩惱。

明白了最終的工作 - >試試：

<script src="bower_components/webcomponentsjs/webcomponents.js"></script> 
<link rel="import" href="bower_components/polymer/polymer.html" />

，然後，離開「我的元素」標記出來，只使用webcomponents。例如：

<core-scaffold id="core_scaffold"> 
    <core-header-panel mode="seamed" id="core_header_panel" navigation flex> 
    <core-toolbar id="core_toolbar"> 
    </core-toolbar> 
    <core-menu valueattr="label" id="core_menu" theme="core-light-theme"> 
     <core-item id="core_item" icon="settings" label="Item1" horizontal center layout active></core-item> 
     <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item> 
    </core-menu> 
    </core-header-panel> 
    <div id="div" tool>Your App Title 
    </div> 
    <core-pages selected="0" selectedindex="0" notap id="core_pages"> 
    <section id="section" active> 
    </section> 
    <section id="section1">Page Two</section> 
    </core-pages> 

</core-scaffold>

隨着流星1.0.2.1和流星添加ecwyne：聚合物元素

@ecwyne感謝您的包的貢獻 - 像一個風情萬種:-)

來源

2015-01-20 16:05:12

如果你在流星中添加和使用聚合物仍然有問題，這裏有一個方法可行。

我們將使用Bower將聚合物添加到Meteor項目中。

創建流星的應用後，導航到應用程序的目錄，並按照以下步驟操作：

$ bower init =>這將帶你通過你需要通過終端

現在讓我們添加聚合物組分：

$ bower install --save Polymer/polymer

bower install --save Polymer/webcomponentsjs

bower install --save Polymer/core-elements

bower install --save Polymer/paper-elements

現在，我們將擁有應用程序的根文件夾內的bower_components目錄包含聚合物成品的配件。創建另一個文件夾public並將bower_components移動到public文件夾中，以便我們有public/bower_components。

下面是一段簡單的代碼，您可以用yourappname.html替換yourappname.html的內容。

<head> 
<title>Athman's Polymer Demo</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<script src="bower_components/webcomponentsjs/webcomponents.js"></script> 
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html"> 
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html"> 
<link rel="import" href="bower_components/core-menu/core-menu.html"> 
<link rel="import" href="bower_components/core-item/core-item.html"> 
<link rel="import" href="bower_components/paper-toast/paper-toast.html"> 
<link rel="import" href="bower_components/paper-fab/paper-fab.html"> 

<style> 
    html, body { 
     height: 100%; 
     margin: 0; 
    } 
    body { 
     font-family: sans-serif; 
    } 
    core-scaffold { 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
    } 
    #core_toolbar { 
     color: rgb(255, 255, 255); 
     background-color: rgb(79, 125, 201); 
    } 
    #core_card { 
     width: 96%; 
     height: 300px; 
     border-top-left-radius: 2px; 
     border-top-right-radius: 2px; 
     border-bottom-right-radius: 2px; 
     border-bottom-left-radius: 2px; 
     box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; 
     margin: 2%; 
     background-color: rgb(255, 255, 255); 
     text-align: left; 
    } 
    paper-fab { 
     position: absolute; 
     right: 20px; 
     bottom: 20px; 
    } 
</style> 
</head> 
<body > 
<core-scaffold> 
    <core-header-panel navigation flex mode="seamed"> 
     <core-toolbar id="core_toolbar">Navigation</core-toolbar> 
     <core-menu theme="core-light-theme"> 
      <core-item icon="settings" label="item1"></core-item> 
      <core-item icon="settings" label="item2"></core-item> 
     </core-menu> 
    </core-header-panel> 
    <div tool>Test Project</div> 
    <core-card id="core_card" vertical layout start> 
     <div style="padding: 20px;">This is a sample project</div> 
    </core-card> 
    <paper-toast id="toast1" text="Created by Nic Raboy"></paper-toast> 
</core-scaffold> 
<paper-fab icon="add" onclick="document.querySelector('#toast1').show()"></paper-fab> 
</body>

現在讓我們開始運行我們的應用程序...

$ meteor

享受聚合物

現金Nic Raboy: Using Polymer With Apache Cordova

來源

2015-02-05 18:12:48 Athman

謝謝它的作品:) –

如何在這種情況下獲得涼亭？通過NPM（「默認」方式）還是流星包？此外，在開始時包含NPM/bower步驟或參考鏈接將是一個不錯的主意，所以即使是一個初學者也可以跟隨這個步驟。 – XenoRo

這不適合我。我得到了一堆錯誤，主要是相同問題的重複實例：未捕獲的TypeError：無法讀取undefined的屬性'helpers'@ myproject.js：5 ---'Uncaught TypeError：prototype.registerCallback不是函數@ polymer-micro.html：73（多次）---'Uncaught TypeError：Polymer.mixin不是一個函數'@ polymer-mixins.js：7 ---'Uncaught SyntaxError：未能執行'documentElement'on'Document '：註冊類型'undefined'失敗。類型名稱無效.' @ polymer-micro.html：64 – XenoRo

流星，所有的文件夾/內/public目錄中的文件需要您導入這樣的：

<link import="/bower_components..>和您的自定義元素相同

<link import="/elements/my-elements.html>

注：

無需與bower安裝聚合物。

相反，試試這個：

$ meteor add ecwyne:polymer-elements

來源

2015-02-09 07:14:04 phtn458

重要

聚合物v0.5.5使用叉形@ecwyne包更新到最新的高分子脫模：

meteor add boxxa:polymer-elements

來源

2015-02-24 17:37:18 ZuzEL

我已經在使用聚合物元件時遇到類似的問題。解決方案是一個構建插件，它可以硫化導入文件中列出的所有文件。

結帳。它完全是這樣。使用這個軟件包，您不必在公用文件夾中編寫聚合物代碼，然後導入到火焰模板。使用mwc:compiler，您可以使用聚合物作爲默認視圖層而不是火焰。您只需要創建一個名爲compiler.mwc.json的配置文件。

我們已經構建了一個可以像Blaze.render函數一樣使用的佈局渲染包。 https://github.com/meteorwebcomponents/layout

的數據混入到從聚合物組分反應性使用流星數據也可https://github.com/meteorwebcomponents/mixin

這裏是一個演示應用程序與flowrouter https://github.com/meteorwebcomponents/demo-flowrouter

在這裏是使用所有的上述包裝的一個應用程序https://github.com/HedCET/TorrentAlert

來源

2016-03-05 17:49:18 tkay

流星應用中的聚合物元素

回答

重要

相關問題