Polimer 1.0'ı kullanarak kağıt çekmece paneli düzeni oluşturdum. Çekmecede, demir sayfalara bağlı kağıt parçaları olan kağıt menüsünü kullanan bir menüm var. Bu örneği Content Switcheroo with Core-Pages -- Polycasts #09'dan aldım ve onu Polymer 1.0 öğelerini kullanmaya dönüştürdüm. Aşağıdaki kodda, makalelerin sabit kodlanmış olduğu yorumlanmış bölümümü görebilirsiniz. Bu iyi çalışıyor.Polimer 1.0: Şablonun, sayfadaki demir sayfalarını görüntülemek için kağıt menü öğelerinin içinde tekrar basılması
Sonraki adımım, menü öğelerinin rastgele bir dizisini yinelemek için <template is="dom-repeat"> öğeyi kullanarak dinamik olarak menümüzü oluşturmaya çalışmaktı. Menü doğru bir şekilde oluşturulmuştur (diziye bağlı tüm menü öğelerini görebilirim), ancak öğeleri tıklayamıyorum ve demir sayfaları görüntülenmiyor. Görünüşe göre seçildi için kullanılan veri kategorisi özniteliği <template is="dom-repeat"> içinde çalışmıyor gibi görünüyor.
Bunu çalışmak için hangi yollarla alabilirim? Düzenleme: Seçili özniteliklerin kaldırılması ve dizin çalışmalarını kullanarak demir sayfalarının değiştirilmesi, ancak dizinin dizinine bağlı kalmak benim durumumda bir seçenek değildir.
<!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>
mi? Bu örnekte –
dom-repeat çalışıyor. Kağıt öğeleri görüntülenir, ancak öğeleri tıklattığımda hiçbir şey olmuyor. Görünüşe göre sadece 'veri kategorisi' özelliği çalışmıyor. –