預先填充自定義數據的鐵菜單

有沒有辦法用數據預先填充iron-menu元素而不是創建新的自定義元素，還是可以擴展？使用聚合物1.0。我已經創建了自己的元素並滿足了上述要求，但創建一個幾乎與現有元素完全相同的元素是非常明智的嗎？考慮這個問題：預先填充自定義數據的鐵菜單

這是鐵的菜單元素代碼：

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/iron-menu-behavior/iron-menubar-behavior.html"> 

<dom-module id="system-menu"> 

    <style> 

    .content ::content > .iron-selected { 
     color: red; 
    } 

    .content ::content > * { 
     display: inline-block; 
    } 

    </style> 

    <template> 

    <div class="content"> 
     <content></content> 
    </div> 

    </template> 

</dom-module> 

<script> 

(function() { 

    Polymer({ 

    is: 'system-menu', 

    behaviors: [ 
     Polymer.IronMenubarBehavior 
    ] 

    }); 

})(); 

</script>

我要保留鐵菜單行爲。在使用它，不能我做這樣的事情：

<system-menu class="list"> 
    <template is="dom-repeat" items="{data}"> 
     <li>{{item.label}}</li> 
    </template> 
</system-menu>

此代碼我從鐵菜單行爲例如

來源

2015-06-26 Platinum Industries

我發現這個問題的答案，貌似我不是逃避{{data}}我的陣列是這樣的

[{"label":"login","url":"\/login","parent_id":"0"},{"label":"register","url":"\/register","parent_id":"0"}]

而且我是用items="{{data}}"發送它，因而最終的結果將是：

items="{{[{"label":"login","url":"\/login","parent_id":"0"},{"label":"register","url":"\/register","parent_id":"0"}] 
}}"

該數組是php生成的，所以我不知道""報價。我發現更改項目到items={{data}}解決了我的問題。

來源

2015-06-26 10:26:18

了有沒有iron-menu真元，還有的IronMenuBehavior但它實際上並不包含任何模板，只是菜單邏輯。您創建的這個元素看上去就像是paper-menu，但具有不同的樣式。

菜單內容可以使用常規HTML進行硬編碼，也可以按照您的建議在其他元素中迭代處理。沒有辦法將它綁定，我知道，所以你需要編寫另一個元素（或綁定它將Angular，雖然我從來沒有試過，所以我不知道這是否會工作）綁定到data。雖然

<dom-module is="iron-menu"> 
    <template> 
     <system-menu class="list"> 
      <template is="dom-repeat" items="{{data}}"> 
       <li>{{item.label}}</li> 
      </template> 
     </system-menu> 
    </template> 
</dom-module> 
<script> 
Polymer({ 
    is: "iron-menu", 
    properties: { 
     data: { 
      type: Array, 
      value: function() { 
       return [ 
        {label: 'Item 1'}, 
        {label: 'Item 2'}, 
        {label: 'Item 3'} 
       ] 
      } 
     } 
    } 
}) 
</script>

一件事，你似乎有一個錯字{data}不{{data}}。

來源

2015-06-26 05:13:03 miyamoto

預先填充自定義數據的鐵菜單

回答

相關問題