聚合物1.0数据绑定不按预期方式工作

Question

我试图绑定自定义元素中的一些数据，但无济于事。我有一个系统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> 

此外，{{数据}}在此文件JSON编码从PHP数据。这是

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

我的问题是，我该如何访问和我系统menu.html模块使用JSON数据数据？

目前我得到这些错误：

[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兼容阵列）插入<template is='dom-repeat'>标签的items属性。

全部放在一起，你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>