Question

我试图从json生成Polymer子菜单和项目。代码只是嵌套子菜单＆amp;项目模板：

<polymer-element name="years-submenu" noscript>
  <template>
    <core-ajax auto url="../json/years and offices.json" response="{{items}}" handleAs="json"></core-ajax>
    <template repeat="{{item in items}}">
      <core-submenu icon="visibility" label="{{item.year}}">
          <template repeat="{{office in item.offices}}">
            <core-item id="{{item.year}} {{office}}" label="{{item.year}} {{office}}"></core-item>
          </template>
      </core-submenu>
    </template>
  </template>
</polymer-element>

json数据可以采用任何旧方式构建，但目前看起来像这样：

[
  {
        "offices": [
            "Mayor",
            "Council At-Large"
        ],
        "year": "2014"
    },
    {
        "offices": [
            "Council Chairman",
            "Council At-Large",
            "Council Ward 2",
            "Council Ward 4"
        ],
        "year": "2012"
    }
]

这会呈现年份，但不是办公室名称。奇怪的是，如果我检查chrome中的元素，我可以看到它正在插入{{item.year}}和{{office}}作为id而不是标签。我尝试了各种明确约束的方式，但无济于事;当然，我可能一直在尝试错误的方法。关于如何使这项工作的任何想法将非常感谢。

Answer 1

事实证明，如果我把我的子菜单代码放在我的自定义元素中（而不是从包含我的自定义元素的主页面调用子菜单，它就可以了。

因此，调用问题中发布的元素如下：

<core-menu selected="{{selected}}" valueattr="id" theme="core-light-theme">
  <years-submenu></years-submenu>
</core-menu>

但是从主页调用以下内容确实有效：

<polymer-element name="years-menu" noscript>
  <template>
    <core-menu selected="{{selected}}" valueattr="id" theme="core-light-theme">
      <core-ajax auto url="../json/years and offices.json" response="{{items}}" handleAs="json"></core-ajax>
      <template repeat="{{item in items}}">
        <core-submenu icon="visibility" label="{{item.year}}">
          <template repeat="{{office in item.offices}}">
            <core-item id="{{item.year}} {{office}}" label="{{item.year}} {{office}}"></core-item>
          </template>
        </core-submenu>
      </template>
    </core-menu>
  </template>
</polymer-element>

我不完全理解为什么，但问题解决了。

Answer 2

我创建了一个聚合物元素来从JSON创建一个菜单。它有一些其他很酷的功能，我将继续增强它。

它并不完全适合您的问题但请查看。

如果您有任何问题/想法，请创建一个github问题/拉取请求

https://github.com/sup3rb0wlz/nb-menu

聚合物子菜单和来自json的物品

2 个答案: