polymer 1.0 data binding not working as expected

Question

I'm trying to bind some data in a custom element but to no avail. I have a system-menu.html that has my custom element:

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

This is how I use it (Note that i've done all imports for the other items)

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

Also, {{data}} in this file is json encoded data from php. Here it is

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

My question is, how am I supposed to access and use this json data data in my system-menu.html module?

Currently i'm getting these error:

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

Uncaught TypeError: Cannot read property 'getKey' of undefined

Answer 1

First, you need to transform your json {{data}} into an array of objects readable by <template is='dom-repeat'> . I assume that you want

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

to become something like

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

The actual code to do the above should be trivial and beyond the scope of this question.

Second, you need to publish the data property in your <system-menu> custom element since you are binding the data attribute from the parent template.

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

You can pass in a computed function (to perform the conversion from your json {{data}} into the dom-repeat -compatible array) into the items attribute in the <template is='dom-repeat'> tag.

Putting it all together, your system-menu.html might look something like that

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