聚合物綁定在Firefox中不起作用

我看到一個問題，我可以看到綁定的「測試」值出現在Chrome上的演示頁面上，而不是Firefox中。我已經包括polyfills（webcomponents-lite.js），所以我真的不知道缺少什麼。有任何想法嗎？？先謝謝你。聚合物綁定在Firefox中不起作用

票項目演示頁

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> 
    <title>ticket-item demo</title> 
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 
    <link rel="import" href="../../iron-ajax/iron-ajax.html"> 
    <link rel="import" href="../ticket-item.html"> 

    <script> 
     window.addEventListener('WebComponentsReady', function() { 
     let element = document.getElementById('ticket-item'); 
     element.test = 'test'; 
     }); 
    </script> 
    </head> 
    <body> 
    <div class="vertical-section-container centered"> 
     <h3>Basic ticket-item demo</h3> 
     <demo-snippet> 
     <template> 
      <ticket-item id="ticket-item"></ticket-item> 
     </template> 
     </demo-snippet> 
    </div> 
    </body> 
</html>

票-item元素

<dom-module id="ticket-item"> 
    <template> 
    <style include="my-theme"> 
     :host { 
     display: block; 
     } 
    </style> 
    <div>test: [[test]]</div> 
    </template> 

    <script> 
    class TicketItem extends Polymer.Element { 
     static get is() { return 'TicketItem'; } 
     static get properties() { 
     return { 
      test: String 
     }; 
     } 
    } 
    window.customElements.define(TicketItem.is, TicketItem); 
    </script> 
</dom-module>

來源

2017-08-09 brainmonger

的第一件事：

自定義的元素名稱。根據規範，自定義元素的名稱必須以小寫ASCII字母開頭，並且必須包含短劃線（ - ）。還有一個與現有名稱匹配的禁用元素名稱的簡短列表。有關詳細信息，請參閱HTML規範中的Custom elements core concepts部分。

因此，您必須更改「item」元素的名稱。

代替直接加載webcomponents-lite.js，加載webcomponents-loader.js（使用特徵檢測動態加載最小填充束的客戶端加載程序）將完成其餘工作。

Plnkr link：適用於Firefox和Chrome。

來源

2017-08-09 05:09:04 Ofisora

非常感謝Ofisora花時間在plnkr中添加示例。我只是故意在本文中將組件的引用重命名爲'item'，只是爲了使其更加模糊，但正如您指出的那樣不正確，所以我已將其更改爲避免混淆。儘管如此，感謝關於命名約定的說明。奇怪的是，我看着你的例子，並看到它在FF中工作，並且當我將完全相同的代碼複製到我的本地時，它仍然不適用於FF中的我。這很奇怪。我會嘗試重新創建元素，看看是否有幫助。 – brainmonger

哇...我發現這個問題......問題在於我命名了我的組件'ticket-item'，並將id設置爲'ticket-item'。它顯然需要與'ticket-item'有所不同。我將id更改爲'item'，現在我看到綁定了！ – brainmonger

我也喜歡你的答案，因爲它非常有用。 – brainmonger

問題是我給組件命名了'ticket-item'，id被設置爲'ticket-item'。它顯然需要與'ticket-item'有所不同。我將id更改爲'item'，現在我看到了綁定。

來源

2017-08-09 17:53:08 brainmonger

此外，我認爲你的is（）函數應該是'{return'ticket-item'; }'，而不是'{return'TicketItem'; }'。 – Thad

聚合物綁定在Firefox中不起作用

回答

相關問題