पॉलिमर 1.0 का उपयोग करके, मैंने एक पेपर-ड्रावर-पैनल लेआउट बनाया है। दराज में मेरे पास पेपर-मेन्यू का उपयोग करके एक मेनू है जिसमें पेपर-आइटम हैं जो लोहे के पृष्ठों से बंधे हैं। मैंने यह उदाहरण Content Switcheroo with Core-Pages -- Polycasts #09 से लिया और इसे पॉलिमर 1.0 तत्वों का उपयोग करने के लिए परिवर्तित कर दिया। नीचे दिए गए कोड में आप मेरी टिप्पणी अनुभाग देख सकते हैं जिसमें पेपर-आइटम हार्ड-कोड किए गए हैं। यह ठीक काम करता है।पॉलिमर 1.0: चयन पर लोहे के पृष्ठों को प्रदर्शित करने के लिए पेपर-मेनू तत्वों के अंदर टेम्पलेट डोम-दोहराना का उपयोग
मेरा अगला चरण <template is="dom-repeat"> तत्व का उपयोग करके मेनू मेनू की मनमानी सरणी पर पुनरावृत्ति करने के लिए गतिशील रूप से मेरे मेनू को बनाने और बनाने का था। मेनू सही ढंग से प्रस्तुत किया जाता है (मैं सरणी से बंधे सभी मेनू आइटम देख सकता हूं), लेकिन मैं आइटम पर क्लिक नहीं कर सकता और कोई लोहे-पेज प्रदर्शित नहीं होते हैं। ऐसा लगता है कि डेटा-श्रेणी विशेषता जो कि चयनित के लिए उपयोग की जाती है <template is="dom-repeat"> के अंदर काम नहीं कर रही है।
मैं इसे किस तरीके से काम करने के लिए प्राप्त कर सकता हूं? संपादित करें: चयनित गुणों को हटाकर और इंडेक्स कार्य का उपयोग करके लोहे के पृष्ठों को स्विच करना, लेकिन सरणी के सूचकांक पर निर्भर करना मेरी स्थिति में एक विकल्प नहीं है।
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel>
<paper-header-panel drawer class="fit">
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-category">
<!-- This works -->
<!--
<paper-item data-category="item1" label="item1">
<span>John Smith</span>
</paper-item>
<paper-item data-category="item2" label="item2">
<span>Jane Doe</span>
</paper-item>
-->
<!-- This does not work -->
<template is="dom-repeat" items="{{names}}">
<paper-item data-category="{{item.itemNum}}" label="{{item.itemNum}}">
<span>{{item.first}}</span><span>{{item.last}}</span><span>{{item.itemNum}}</span>
</paper-item>
</template>
</paper-menu>
</paper-header-panel>
<paper-header-panel main class="fit">
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex">Main Content</div>
</paper-toolbar>
<iron-pages selected="{{page}}" attr-for-selected="data-category">
<section data-category="item1">
<h1>Item 1</h1>
<div>Item 1 content...</div>
</section>
<section data-category="item2">
<h1>Item 2</h1>
<div>Item 2 content...</div>
</section>
</iron-pages>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "my-app",
ready: function() {
this.names = [{itemNum: "item1", first: "John", last: "Smith"}, {itemNum: "item2", first: "Jane", last: "Doe"}];
}
});
</script>
</dom-module>
</body>
</html>
क्या डोम-दोहराना साइट पर कहीं और काम कर रहा है? –
डोम-दोहराना इस उदाहरण में काम कर रहा है। पेपर-आइटम प्रदर्शित होते हैं, लेकिन जब मैं आइटम पर क्लिक करता हूं तो कुछ भी नहीं होता है। ऐसा लगता है कि केवल 'डेटा-श्रेणी' विशेषता काम नहीं कर रही है। –