1
私は紙のメニューを実装するための非常に基本的な試みがあります。しかし、レンダリングされたHTMLは正しくなく、相互作用を中断します。メニュー項目をクリックすると、リスト全体が消えます。 paper-menu要素の中の非常に重要なdiv内には、paper-item要素が描画されていないので、私はそれを特定しました。ポリマー用紙 - メニューブラウザで正しく表示されないHTML
マイcomponent.htmlは次のようになります。私は適切に近いdivタグので、ブラウザでレンダリングされたHTMLを操作する場合は
<div>
<paper-menu role="menu" tabindex="0" selected="0" class="x-scope paper-menu-0">
<div class="selectable-content style-scope paper-menu">
</div>
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 1</paper-item>
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 2</paper-item>
</paper-menu>
</div>
：
<div>
<paper-menu selected="0">
<paper-item>Location 1</paper-item>
<paper-item>Location 2</paper-item>
</paper-menu>
</div>
しかし、どのようなレンダリングされるが、このようなものですペーパーアイテムの要素をラップすると、相互作用が働きます。
私は間違っていますか？私のindex.htmlで
私が持っている：
<script src="lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="lib/paper-button/paper-button.html" />
<link rel="import" href="lib/paper-input/paper-input.html" />
<link rel="import" href="lib/paper-item/paper-item.html" />
<link rel="import" href="lib/paper-menu/paper-menu.html" />
<link rel="import" href="lib/paper-listbox/paper-listbox.html" />
<link rel="import" href="lib/paper-toggle-button/paper-toggle-button.html" />
<link rel="import" href="lib/paper-progress/paper-progress.html" />
<link rel="import" href="lib/paper-dropdown-menu/paper-dropdown-menu.html" />
そして、私のbower.jsonに私は、次のバージョンに
{
"name": "permit-manager-app",
"private": true,
"dependencies": {
"polymer": "^1.4.0",
"webcomponentsjs": "^0.7.22",
"paper-button": "^1.0.11",
"paper-input": "^1.1.10",
"paper-progress": "^1.0.9",
"paper-dropdown-menu": "1.2.1",
"paper-menu": "1.2.2",
"paper-item": "1.2.1",
"paper-listbox": "1.1.2",
"paper-toggle-button": "^1.1.2"
}
}
を参照しています。これは、私が「Angular2ベータ17
BUMP：私は明示的に期待されるdivタグで紙項目のリストをラップすることによって、問題をハッキング。その結果、レンダリングされたhtmlに2つのdiv要素が追加されました。 1は何もしない空で、2番目は必要なコンテナを提供し、コンポーネントは期待どおりに動作します。ソースの問題と解決方法の説明を探しています。 – Jessel