使用自定义数据预填充 iron-menu

Question

有没有办法用数据预先填充 iron-menu 元素而不是创建新的自定义元素，或者可以扩展它？使用聚合物 1.0。我已经创建了自己的元素并满足了上述要求，但是创建一个几乎与现有元素完全相同的元素真的明智吗？考虑一下：

这是 iron-menu 元素代码：

<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>

我想保留 iron-menu 的行为。使用它时，我不能这样做:

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

我从 iron-menu-behaviour 示例中获取的这段代码

Answer 1

确实没有 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}}。

Answer 2

我找到了答案，看起来我没有逃避 {{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}} 解决了我的问题。

使用自定义数据预填充 iron-menu

pre-populate iron-menu with custom data

html

javascript

polymer