僅AJAX動態紙張標籤

我一直在這個工作一段時間，試圖獲得動態的紙張選項卡。基本上我有一個AJAX請求後填充的數組，我希望能夠添加一個新的紙標籤，然後用陣列中的一些其他內容填充一個鐵頁面div，其格式可能如下所示：僅AJAX動態紙張標籤

[{"Category":"Fruit", "Name":"Banana"}, 
{"Category":"Fruit", "Name":"Apple"}, 
{"Category":"Vegetable", "Name":"Potato"}]

所以部分的開頭如...

<template is="dom-bind"> 
    <paper-tabs id="menuTabs" selected="{{selected}}"> 
    </paper-tabs> 

    <iron-pages id="menuPages" selected="{{selected}}"> 
    </iron-pages> 
</template>

，並會喜歡的東西......結束

<template is="dom-bind"> 
    <paper-tabs id="menuTabs" selected="{{selected}}"> 
     <paper-tab>Fruit</paper-tab> 
     <paper-tab>Vegetable</paper-tab> 
    </paper-tabs> 

    <iron-pages id="menuPages" selected="{{selected}}"> 
     <div>Banana, Apple</div> 
     <div>Potato</div> 
    </iron-pages> 
</template>

的夢想是，也許我可以用一個模板做這沒有一個單獨的元素或th e Polymer DOM API，但對於Polymer來說我相當新，所以我可能完全忽略了這個概念。我試過用JS之後在paper-tabs元素內添加新的紙標籤元素，但是他們最終在DOM的錯誤位置，甚至不改變鐵頁。任何指導讚賞:)

來源

2015-10-05 Knightwatch

你要組分類，然後顯示在標籤中的每個獨特的範疇？如果是這樣，您必須先使用JavaScript對數據進行轉換/分組，然後動態創建紙張標籤和熨燙頁面。 –

是的，他們分組。我猜想在數組屬性的觀察者函數中，我可以將數組分組，然後appendChild一些紙標籤元素？除非像分類數組那樣擁有單獨的屬性更好 – Knightwatch

使用dom-repeat來遍歷您的列表。然後你可以用數組的值填充其他元素。 https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind

自定義元素例如：

<dom-module id="test-element"> 
    <template is="dom-repeat" items="{{stuff}}"> 
    <paper-tabs id="menuTabs" selected="{{selected}}"> 
     <paper-tab>{{item.Category}}</paper-tab> 
    </paper-tabs> 
    <iron-pages id="menuPages" selected="{{selected}}"> 
     <div>{{item.Name}}</div> 
    </iron-pages> 
    </template> 
    <script> 
    Polymer({ 
     is: 'test-element', 
     properties: { 
     stuff:{ 
      type: Array, 
      value: [{'Category':'Fruit', 'Name':'Banana'}, 
       {'Category':'Fruit', 'Name':'Apple'}, 
       {'Category':'Vegetable', 'Name':'Potato'}] 
     } 
    }); 
    </script> 
</dom-module> 
<test-element></test-element>

dom-bind例子（沒有自定義元素）：

<template id="t" is="dom-bind"> 
    <template is="dom-repeat" items="{{stuff}}"> 
    <paper-tabs id="menuTabs" selected="{{selected}}"> 
     <paper-tab>{{item.Category}}</paper-tab> 
    </paper-tabs> 
    <iron-pages id="menuPages" selected="{{selected}}"> 
     <div>{{item.Name}}</div> 
    </iron-pages> 
    </template> 
    <script> 
    var t = document.querySelector('#t'); 
    t.stuff=[{'Category':'Fruit', 'Name':'Banana'},{'Category':'Fruit', 'Name':'Apple'},{'Category':'Vegetable', 'Name':'Potato'}]; 
    </script> 
</template>

來源

2015-10-06 20:12:34

僅AJAX動態紙張標籤

回答

相關問題