-
Notifications
You must be signed in to change notification settings - Fork 54
Should be able to <template repeat> on object values just like we do on array values. #116
Comments
I think the filters implemented by the syntax can handle this. I don't know what the right syntax is but something like
The access to index is a separate issue. Opened another bug here: #117 |
How you implement this does relate to the index issue. If you use a filter that maps the object to an array, then you will lose the key/index. I think of the index as the key for the value in the array or object. If I iterate over { "kris": 1, "bob": 2 } then I would expect the index, value pairs to be [["kris",1],["bob",2]]. The MDV templating syntax should ideally not require developers to structure our data in any particular way. If it does, then we have to go through an intermediate step of converting our data to a MDV friendly model before using it. This is difficult, and means we must also manually watch our original data for changes. Not good. I would like to use my data in whatever format I keep it, and we don't always keep our items in arrays. We use objects as hashtables very frequently to store items. |
I've said it before and I'll say it again. I think the right solution is to follow the for-of path of ES6. Here are some examples from ES6. var array = ['Hi'];
for (let value of array) {
print(value); // 'Hi'
}
for (let key of array.keys()) {
print(key); // '0'
}
for (let [key, value] of array.enties()) {
print(key); // '0'
print(value); // 'Hi'
} So applying this to MDV repeat: <template repeat="{{value of array}}">
{{value}}
</template>
<template repeat="{{key of array.keys()}}">
{{key}}
</template>
<template repeat="{{[value, key] of array.entries()}}">
{{key}} {{value}}
</template> |
@arv I like that alot. |
Strawman: -Support "ES6-like simple destructuring syntax for named scopes". e.g.
Where this isn't really full destructuring (you can't do [index, [id, name]] of...), but it does work for a accessing the first two items of an element array. The entries() is a filter which observer the underlying array (and keeps the key values correct if it mutates). (Note that we're still not settled on how filters work -- the right side of the above expression may change syntax). This has the benefit of: -not having to choose between picking a magical index/key name that may collide with user data...or picking some weirdo identifier. <template repeat="{{ [userIndex, user] of entries(user) }}">
<template repeat="{{ [projectIndex, project] of entries(user.projects) }}">
<!-- userIndex and projectIndex are both accessible here -->
</template>
</template> I think this is implementable, though I can imagine wrinkles arising. Thoughts? |
@krisnye, I guess I've proved your point that these issues are related =-). |
FWIW, I've been implement comprehensions in the Dart custom syntax I've been working on (with the goal of compatibility with Polymer). So far I've been using Dart-like "in" syntax, with some additional sugar. For example: <template repeat="{{ a, b in myMap }}"> or <template repeat="{{ x*x as y for x in range(0, 10) where x % 2 == 0 }}"> So far so good. I prefer "in", like Python comprehensions and for..in loops, but JS and I presume Polymer will use "of" so that seems a clear way to go. I like brackets for introducing identifiers as it allows multiple identifiers to be added with "as" even for lists: <template repeat="{{ [x*x as y, x] for x of range(0, 10) }}"> or <template repeat="{{ [index, user.name as name, user.id as id] for entry of enumerate(users) }}"> (where |
I like the ES6 compatible syntax as well. |
@justinfagnani I don't think we can really do iterables like what you showed with the comprehension example. To support iterables we would have to reiterate using dirty checking because iterables have no state and no notifications about changes. Maybe you are just suggesting to use the same syntax and implement all of these as filters? FWIW, the comprehension syntax in ES6 is: [for (x of range(0, 10)) if (x % 2 == 0) x * x] // array
(for (x of range(0, 10)) if (x % 2 == 0) x * x) // iterator with next() |
moved to: googlearchive/polymer-expressions#11 |
It would also be nice for both arrays and objects to be able to have an index value available for binding. For instance:
Demonstration of object repeat template not working:
The text was updated successfully, but these errors were encountered: