Question

我试图在自定义元素中绑定一些数据，但无济于事。我有一个system-menu.html，它有我的自定义元素：

系统menu.html

<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">
    <template>
        <template is="dom-repeat" items="{{data}}">
            <li>{{item.name}}</li>
        </template>
    </template>
</dom-module>

<script>
(function() {
  Polymer({
        is: 'system-menu',
        behaviors: [
          Polymer.IronMenubarBehavior
        ],

        ready: function() {
            console.log(this.data);

      }
  });
})();
</script>

这是我使用它的方式（请注意，我已完成其他项目的所有导入）

<link rel="import" href="/themes/_components/custom_components/system-menu/system-menu.html">

 <style>

    .list {
      display: inline-block;
      padding: 8px 0;
    }

    .list li {
      display: block;
      padding: 8px;
    }

    .list li[disabled] {
      color: #ccc;
    }

  </style>

<system-menu class="list flex horizontal end-justified layout" data="{{data}}"></system-menu>

此文件中的 {{data}} 是来自php的json编码数据。这是

{＆＃34;登录＆＃34; {＆＃34; URL＆＃34;：＆＃34; /登录＆＃34;＆＃34; PARENT_ID＆＃34;：＆＃34; 0＆＃34; }，＆＃34;寄存器＆＃34; {＆＃34; URL＆＃34;：＆＃34; /注册＆＃34;＆＃34; PARENT_ID＆＃34;：＆＃34; 0＆＃34;}}

我的问题是，我应该如何在 system-menu.html 模块中访问和使用此json数据？

目前我收到了这些错误：

[dom-repeat :: dom-repeat]：找到items的预期数组   {

未捕获的TypeError：无法读取属性＆＃39; getKey＆＃39;未定义的

Answer 1

首先，您需要将json {{data}}转换为<template is='dom-repeat'>可读的对象数组。我假设你想要

{ “登录”：{ “URL”： “/登录”， “PARENT_ID”： “0”}， “寄存器”：{ “URL”： “/注册”， “PARENT_ID”： “0”}}

变成类似

的东西

[{name：“login”，url：“/ login”，parent_id：“0”}，{name：“register”，url：“/ register”，parent_id：“0”}]

执行上述操作的实际代码应该是微不足道的，超出了本问题的范围。

其次，您需要在data自定义元素中发布<system-menu>属性，因为您绑定了父模板中的data属性。

<system-menu class="list flex horizontal end-justified layout" data="{{data}}"></system-menu>

您可以将计算函数（以执行从json {{data}}转换为dom-repeat - 兼容数组）转换为items标记中的<template is='dom-repeat'>属性

总而言之，您的system-menu.html可能看起来像那样

<dom-module id="system-menu">
    <template>
        <template is="dom-repeat" items="{{_transformData(data)}}">
            <li>{{item.name}}</li>
        </template>
    </template>
</dom-module>

<script>
  Polymer({
        is: 'system-menu',
        behaviors: [
          Polymer.IronMenubarBehavior
        ],
        properties: {
          data: Object
        },
        _transformData: function (d) {

          // place transformation code here

          return transformedDataThatIsNowAnArray;
        },
        ready: function() {
          console.log(this.data);
        }
  });
</script>

聚合物1.0数据绑定无法按预期工作

1 个答案: