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

Question

我试图在自定义元素中绑定一些数据，但无济于事。我有一个系统-[=37=]，其中包含我的自定义元素：

系统-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 编码数据。在这里

{"login":{"url":"/login","parent_id":"0"},"register":{"url":"/register","parent_id":"0"}}

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

目前我收到这些错误：

[dom-repeat::dom-repeat]: expected array for items, found {

Uncaught TypeError: Cannot read property 'getKey' of undefined

Answer 1

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

{"login":{"url":"/login","parent_id":"0"},"register":{"url":"/register","parent_id":"0"}}

变成

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

执行上述操作的实际代码应该很简单，超出了这个问题的范围。

其次，您需要在 <system-menu> 自定义元素中发布 data 属性，因为您要从父模板绑定 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 数据绑定未按预期工作

polymer 1.0 data binding not working as expected

javascript

php

arrays

json

polymer