Should be able to <template repeat> on object values, Maps just like we do on array values. #11

rafaelw · 2013-11-28T00:08:06Z

Moved from googlearchive/TemplateBinding#116

It would also be nice for both arrays and objects to be able to have an index value available for binding. For instance:

<template repeat="{{ myarray }}" index="i"> {{ i }} {{ somevalue }}</template>

Demonstration of object repeat template not working:

<!DOCTYPE html>
<html>
  <head>
    <script src="polymer.min.js" debug></script>
    <element name="v-bug">
        <template>
            Array Template:
            <template repeat="{{arraydata}}">
                {{}}
            </template><br>
            Object Template:
            <template repeat="{{objectdata}}">
                {{}}
            </template>
        </template>
        <script>
        Polymer.register(this, {
            objectdata: { alpha: 1, beta: 2, charlie: 3 },
            arraydata: [1,2,3]
        });
        </script>
    </element>
  </head>
  <body>
    <v-bug></v-bug><br>
  </body>
</html>

The text was updated successfully, but these errors were encountered:

dfreedm · 2014-02-28T18:34:28Z

Ping! @timoxley

warpech · 2014-05-12T17:04:34Z

+1

…rties, due to PolymerExpression bugs: googlearchive/polymer-expressions#28 googlearchive/polymer-expressions#11

tomalec · 2014-06-10T09:07:05Z

+1

alyssaq · 2014-07-01T13:29:10Z

+1

erikringsmuth · 2014-07-14T00:04:55Z

+1

zoechi · 2014-07-14T04:08:29Z

Update: I just found: http://www.polymer-project.org/docs/polymer/binding-types.html

When using named scopes with the repeat attribute, the index value for each item in the array is also available by using the following syntax:

<template repeat="{{ user, userIndex in users }}">
  <template repeat="{{ userFile, userFileIndex in user }}">
    {{ userIndex }}:{{ userFileIndex }}.{{ userFile }}
  </template>
</template>

Polymer.dart has an enumerable filter to get the index value. I don't know if this exists in Polymer.js as well see http://stackoverflow.com/questions/19431835 (repeat over objects won't be possible in Polymer.dart though I suppose).

jethro91 · 2014-08-25T12:08:00Z

+1

jmesserly · 2014-09-10T01:27:06Z

edited the subject to include ES6 Map as well, as noted in googlearchive/TemplateBinding#188 ... thanks for suggesting that @jyasskin

cayblood · 2014-10-06T17:29:41Z

+1

jshortall · 2014-10-30T20:25:31Z

+1

chuckh · 2014-10-31T12:56:53Z

+1

egyptianbman · 2014-11-11T17:46:37Z

+1

timcash · 2014-11-24T03:04:59Z

They ability to give the repeater a hint about what is new like in react.js would be nice as well. For example when a list of search results gets reordered it would not need to destroy a bunch of DOM but could just swap them around by a unique key

Here is the example from react. Could this be translated to Polymer?

  render: function() {
    var results = this.props.results;
    return (
      <ol>
        {results.map(function(result) {
          return <li key={result.id}>{result.text}</li>;
        })}
      </ol>
    );
  }

When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused).

rafaelw · 2014-11-24T03:08:56Z

@timcash TemplateBinding already does this, except that its notion of identity is ===. IOW, if you Array.sort() an array it will retain the DOM which corresponds to each array element.

ghost · 2014-12-06T20:50:39Z

+1

arodic · 2014-12-09T19:11:46Z

+1

jmesserly · 2014-12-09T20:17:35Z

fwiw, I'm not actively working on this, so unassigned. Someone eager should feel free to tackle. Happy to review a pull request for this feature.

jmesserly · 2014-12-09T20:34:18Z

also happy to give pointers. I'm not super familiar with polymer-expressions but I can try and help interpret the code :)

My guess is this feature is a lot like repeat="{{item in list}}" so I'd start there, (search for "createInExpression" and you'll see scopeIdent is used to signal that), and see if there's a way to make objects pretend to be "array like". Where it gets a little funny, is we might want to make a virtual array so TemplateBinding can repeat over it, where the "index" is the map key. Then you'd have to be able to observe the original object, and signal a change so template repeat will refresh.

Overall it's probably very few lines of code, but figuring out where to put those lines will be the trick

delebash · 2014-12-14T04:48:04Z

+1

arodic · 2014-12-18T07:09:33Z

@jmesserly I tried looking into polymer-expressions but I'm afraid I'm completely unfamiliar with Polymer source and I couldn't make any progress with it. However, I managed to make a custom filter (hack) that did the trick.

PolymerExpressions.prototype.observedObjectToArray = function(object) {
  var array = [];
  if (_.isObject(object)) {
    array.push.apply(array, _.map(object, function(value, key) {
      return {'value': value, 'key': key};
    }));
    var observer = new ObjectObserver(object);
    observer.open(function(added, removed, changed, getOldValueFn) {
      _.each(added, function(value, key) {
        array.push({'value': value, 'key': key});
      });
      _.each(removed, function(value, key) {
        _.remove(array, {'key': key});
      });
      // TODO: observe change
    }, this);
  }
  return array;
};

With this filter I was then able to:

<template repeat="{{item, i in someObject | observedObjectToArray}}">
  {{i}}, {{item.key}}, {{item.value}}
</template>

Once I had this working, I was able to remove a lot of code from our code base. It made me realize how much complexity we generated due to inability to iterate on object properties in Polymer. If anyone can find time to implement object iteration in template, it would make a lot of people very happy.

Sherlock92 · 2014-12-20T17:34:17Z

+1 please god

ryantheleach · 2015-02-07T16:45:50Z

Does adding +1 's really make a difference?

But anyway, +1 from me.

evtaranov · 2015-02-11T17:32:24Z

+1 vote

moderndeveloperllc · 2015-02-11T22:33:06Z

👍

lgersman · 2015-02-13T12:37:18Z

👍

manustays · 2015-03-02T19:21:37Z

I solved the problem by using a small custom filter:

filterKeys: function(object)
{
    return Object.keys(object);
}

Then use it in the template like this:

<template  repeat="{{key, index in someObject | filterKeys}}">
    {{ index }}. {{ key }} = {{ someObject[key] }}
</template>

proteneer · 2015-03-19T22:25:57Z

+1

7nights · 2015-03-26T03:18:13Z

@manustays Does it still work after you deleted or modified a property of someObject? For me, unless I set someObject to another object, modifying its property won't update the UI.

alecbz · 2015-04-03T16:21:41Z

+1

arodic · 2015-04-03T17:54:50Z

We have +21 so far. @jmesserly @pflannery what's the status of PR #211? Looks like it's ready to merge. No?

jmesserly · 2015-04-03T19:31:43Z

We have +21 so far. @jmesserly @pflannery what's the status of PR #211? Looks like it's ready to merge. No?

Regarding googlearchive/TemplateBinding#211. If the fix was to polymer-expressions, I'd feel okay merging it.

I don't personally feel comfortable merging a new feature into TemplateBinding. This bug was moved to polymer-expressions, by the author of TemplateBinding. It's a lower level part of the system, and @rafaelw took care to keep it very minimal. polymer-expressions is where the higher level APIs live.

Maybe someone on the Polymer team could comment if they think adding new features to TemplateBinding is okay (@kevinpschaaf maybe? I know you've done data binding stuff). If it is, then we're perhaps close to merge. The code changes looked okay (other than the Object.prototype.toString.call(value) === '[object Object]'), but I worried more about whether the fix was in the right repository.

pflannery · 2015-04-03T20:32:49Z

@jmesserly

Object.prototype.toString.call(value) === '[object Object]'

This ensures the value is an Object (dictionary) and not a Date, String, Number or an Array. If someone wants to provide a better way of determining this then I can rectify but this works well otherwise.

I'm not convinced polymer-expressions is the place to do this as we need to be able to determine if the value is to be repeated and if it's an Array or an Object (dictionary). When it's an Object (dictionary) it's converted to an array and observed for changes and when a change occurs it updates the array that the repeat is bound to.

@kevinpschaaf do you think this syntax is to be carried over to 0.8? from what I see it looks like its being dropped and replaced with x-repeat?

kevinpschaaf · 2015-04-08T21:36:18Z

We don't want to introduce additional risk in to the 0.5 codebase, as it will be transitioning to maintenance mode soon. This is good feedback though, and the intent is to support a flavor of this in the 0.8+ codebase.

Issue for that opened here:
Polymer/polymer#1385

rafaelw mentioned this issue Nov 28, 2013

Should be able to <template repeat> on object values just like we do on array values. googlearchive/TemplateBinding#116

Closed

warpech added a commit to Juicy/juicy-tile-editor that referenced this issue May 14, 2014

use array in juicy-tree because it is hard to iterate on object prope…

20e0ac3

…rties, due to PolymerExpression bugs: googlearchive/polymer-expressions#28 googlearchive/polymer-expressions#11

jmesserly self-assigned this Aug 7, 2014

jmesserly added the p1 label Aug 14, 2014

sorvell removed the p1 label Aug 28, 2014

jmesserly removed the p1 label Aug 28, 2014

jmesserly mentioned this issue Sep 10, 2014

Support repeat="{{an_es6_map}}" googlearchive/TemplateBinding#188

Closed

jmesserly changed the title ~~Should be able to <template repeat> on object values just like we do on array values.~~ Should be able to <template repeat> on object values, Maps just like we do on array values. Sep 10, 2014

jmesserly mentioned this issue Nov 4, 2014

Looping over objects googlearchive/NodeBind#17

Closed

jmesserly removed their assignment Dec 9, 2014

pflannery mentioned this issue Jan 31, 2015

template object keys Polymer/polymer#1062

Closed

pflannery mentioned this issue Feb 16, 2015

adds ability to repeat over object keys googlearchive/TemplateBinding#211

Closed

arodic mentioned this issue Mar 17, 2015

Slow performance of template-repeat custom element Polymer/polymer#1304

Closed

kevinpschaaf mentioned this issue Apr 8, 2015

[0.8] x-repeat should support iterating object-valued items Polymer/polymer#1385

Closed

arodic mentioned this issue Jun 12, 2015

key/value iteration support for template dom-repeat Polymer/polymer#1846

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Should be able to <template repeat> on object values, Maps just like we do on array values. #11

Should be able to <template repeat> on object values, Maps just like we do on array values. #11

rafaelw commented Nov 28, 2013

dfreedm commented Feb 28, 2014

warpech commented May 12, 2014

tomalec commented Jun 10, 2014

alyssaq commented Jul 1, 2014

erikringsmuth commented Jul 14, 2014

zoechi commented Jul 14, 2014

jethro91 commented Aug 25, 2014

jmesserly commented Sep 10, 2014

cayblood commented Oct 6, 2014

jshortall commented Oct 30, 2014

chuckh commented Oct 31, 2014

egyptianbman commented Nov 11, 2014

timcash commented Nov 24, 2014

rafaelw commented Nov 24, 2014

ghost commented Dec 6, 2014

arodic commented Dec 9, 2014

jmesserly commented Dec 9, 2014

jmesserly commented Dec 9, 2014

delebash commented Dec 14, 2014

arodic commented Dec 18, 2014

Sherlock92 commented Dec 20, 2014

ryantheleach commented Feb 7, 2015

evtaranov commented Feb 11, 2015

moderndeveloperllc commented Feb 11, 2015

lgersman commented Feb 13, 2015

manustays commented Mar 2, 2015

proteneer commented Mar 19, 2015

7nights commented Mar 26, 2015

alecbz commented Apr 3, 2015

arodic commented Apr 3, 2015

jmesserly commented Apr 3, 2015

pflannery commented Apr 3, 2015

kevinpschaaf commented Apr 8, 2015

Should be able to <template repeat> on object values, Maps just like we do on array values. #11

Should be able to <template repeat> on object values, Maps just like we do on array values. #11

Comments

rafaelw commented Nov 28, 2013

dfreedm commented Feb 28, 2014

warpech commented May 12, 2014

tomalec commented Jun 10, 2014

alyssaq commented Jul 1, 2014

erikringsmuth commented Jul 14, 2014

zoechi commented Jul 14, 2014

jethro91 commented Aug 25, 2014

jmesserly commented Sep 10, 2014

cayblood commented Oct 6, 2014

jshortall commented Oct 30, 2014

chuckh commented Oct 31, 2014

egyptianbman commented Nov 11, 2014

timcash commented Nov 24, 2014

rafaelw commented Nov 24, 2014

ghost commented Dec 6, 2014

arodic commented Dec 9, 2014

jmesserly commented Dec 9, 2014

jmesserly commented Dec 9, 2014

delebash commented Dec 14, 2014

arodic commented Dec 18, 2014

Sherlock92 commented Dec 20, 2014

ryantheleach commented Feb 7, 2015

evtaranov commented Feb 11, 2015

moderndeveloperllc commented Feb 11, 2015

lgersman commented Feb 13, 2015

manustays commented Mar 2, 2015

proteneer commented Mar 19, 2015

7nights commented Mar 26, 2015

alecbz commented Apr 3, 2015

arodic commented Apr 3, 2015

jmesserly commented Apr 3, 2015

pflannery commented Apr 3, 2015

kevinpschaaf commented Apr 8, 2015