javascript - How to use a JSON Object in polymer repeat attribute? - Stack Overflow

admin管理员组

文章数量:1357307

I'm ing to polymer from angular and I'm a little confused by the repeat function.

Does this only work with Arrays?

For instance in my code snippet below I can repeat for each value in the names var but Cannot for each entry in People var. Is this correct and just not possible OR am i missing something as I cannot seem to find anything online that clearly explains and the Documentation doesn't really give a clear explanation.

if in the Event it is as expected i.e. only works for arrays, does anyone have any suggestions as to how I might do similar for JSON Objects

<link rel="import" href="../bower_ponents/polymer/polymer.html">

<polymer-element name="poly-x"  attributes="">
  <template>

    <div class="container">
        <div class="row">
          {{greeting}}
        </div>
        <div class="row">
          {{people.john.name}}
        </div>
        <template repeat="{{name in names}}">
        <div class="row" >
          {{name}}
        </div>
        </template>
        <template repeat="{{person in people}}">
        <div class="row" >
          {{person.name}}
        </div>
        </template>


    </div>
    </template>
    <script>
    (function(){
        console.log('I\'m here');

    Polymer({
      greeting : '\'Allo',
      names: ['john', 'Mary', 'Sam'],

      people: {
              john: {
                name:"John Smith"
                ,address:"1 someplace, somewhere"
            },
            mary: {
                 name:"John Smith"
                ,address:"13, no luck road"
            }

      },  
      observe: {

        },
      ready: function(){   
      }
    });
  })();


  </script>
</polymer-element>

I'm ing to polymer from angular and I'm a little confused by the repeat function.

Does this only work with Arrays?

For instance in my code snippet below I can repeat for each value in the names var but Cannot for each entry in People var. Is this correct and just not possible OR am i missing something as I cannot seem to find anything online that clearly explains and the Documentation doesn't really give a clear explanation.

if in the Event it is as expected i.e. only works for arrays, does anyone have any suggestions as to how I might do similar for JSON Objects

<link rel="import" href="../bower_ponents/polymer/polymer.html">

<polymer-element name="poly-x"  attributes="">
  <template>

    <div class="container">
        <div class="row">
          {{greeting}}
        </div>
        <div class="row">
          {{people.john.name}}
        </div>
        <template repeat="{{name in names}}">
        <div class="row" >
          {{name}}
        </div>
        </template>
        <template repeat="{{person in people}}">
        <div class="row" >
          {{person.name}}
        </div>
        </template>


    </div>
    </template>
    <script>
    (function(){
        console.log('I\'m here');

    Polymer({
      greeting : '\'Allo',
      names: ['john', 'Mary', 'Sam'],

      people: {
              john: {
                name:"John Smith"
                ,address:"1 someplace, somewhere"
            },
            mary: {
                 name:"John Smith"
                ,address:"13, no luck road"
            }

      },  
      observe: {

        },
      ready: function(){   
      }
    });
  })();


  </script>
</polymer-element>

• javascript
• polymer

Share Improve this question Follow asked Jul 29, 2014 at 17:55 jonniejonnie 12.7k1717 gold badges5757 silver badges9494 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Repeat only works with arrays. This is a known issue:

https://github./Polymer/polymer-expressions/issues/11

You can achieve the basic effect you're looking for with a few extra steps, but there are some drawbacks. Here's a simple example with an inline function:

    <template repeat="{{person in keys(people)}}">
    <div class="row" >
      {{people[person].name}}
    </div>

Then define the function on your element prototype like this:

  keys: function(input) {
    return Object.keys(input);
  }, 

Inline function expressions are relatively new, and not in the docs yet, but they work much like filters.

You can see this code in action here:

http://jsbin./puhis/1/edit

Note that there are some problems with this approach: adding a new object to people doesn't cause a new row to be added. Replacing the entire people object causes the bindings to be updated, but it's inefficient if only a few items in the object changed.

If you maintain an array version of the data in the object, and mutate it when the object mutates, you could observe the array instead. This version is slightly more code, but it updates and it doesn't create or destroy extra DOM nodes when you add or remove an element:

http://jsbin./puhis/3/edit

本文标签： javascriptHow to use a JSON Object in polymer repeat attributeStack Overflow