Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

adds ability to repeat over object keys #211

Closed
wants to merge 2 commits into from
Closed

adds ability to repeat over object keys #211

wants to merge 2 commits into from

Conversation

pflannery
Copy link

relates with #116
relates with googlearchive/polymer-expressions#11

example syntax:

<template id="KeysTemplate" is="auto-binding">
  <template repeat="{{key in objectData}}">
    <div>{{key}} - {{objectData[key]}}</div>
  </template>
</template>

@pflannery
Copy link
Author

also relates with Polymer/polymer#1062

@pflannery
Copy link
Author

@rafaelw PTAL

// Use for template repeating objects
function ObjectArrayProxy(values, observe, onAddedCallback, onRemovedCallback) {
this.values = values;
this.onAdded = onAddedCallback;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this callback used?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, I will remove.

@jmesserly
Copy link
Contributor

I added some comments. Overall it looks like it would work. One high level comment, did you consider a design that adds support to https://github.com/Polymer/polymer-expressions instead of TemplateBinding? I think the desire was to fix it at that layer (hence moving this issue googlearchive/polymer-expressions#11 to polymer-expressions)

@pflannery
Copy link
Author

Best to change it in TemplateBinding because that is where we can determine if we have to observe and repeat an Object or an Array at runtime.

I did want to make a change at PolymerExpressions as well so we can also use expressions like {{key, value of obj}} but to do this we need to amend Esprima and PolymerExpressions with two simple methods called parseOfExpression and createOfExpression.
An alternative would be to add an extra attribute like <template repeat='{{key, value in object}}' repeat-values> but that isn't as sexy.

Using an ES6 map in this case wouldn't be possible as its implementation uses iterators to obtain the keys and values meaning we cant monitor keys or values being added or removed. If only there was an ES6 map observer or change callback.

adds the following tests:

Repeat If (Object Keys)
Repeat If (false-true-false)
Repeat If (false-true-false) (Object Keys)
Repeat oneTime-If (predicate false) (Object Keys)
Repeat oneTime-If (predicate true) (Object Keys)
oneTime-Repeat If (Object Keys)
oneTime-Repeat oneTime-If (Object Keys)
Repeat (Object Keys)
Repeat - oneTime (Object Keys)
@pflannery
Copy link
Author

@jmesserly squashed commits back to one. Added 7 more unit tests (cloned from existing tests and transformed to handle object keys)
I found and fixed an issue where keys weren't being applied to the value during an if operation so added a unit test case 'Repeat If (false-true-false) (Object Keys)'

PTAL

@pflannery
Copy link
Author

closed in favour of implementation in 0.8 Polymer/polymer#1385

@pflannery pflannery closed this Apr 8, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants