toObservable() does not work correctly with a Map and template repeat #15407
Comments
|
This comment was originally written by Roman.Korneyev@gmail.com This is blocker bug for me.. |
|
This comment was originally written by treyy33...@gmail.com dirty hack around this while waiting for a fix is after adding a key, recreate the map: probably terrible for performance in many situations but it gets me moving forward in development for now. |
|
This comment was originally written by joo.t...@gmail.com Yes, i have the same problem, can correct observe update key and value, but can't correct observe add and remove's key and value, follow is the test sample. <!DOCTYPE html> <html> @CustomTag('my-element') MyElement.created() : super.created() { void test(Event event, var detail, Node target) { </body> Attachments: |
|
Added Library-Observe label. |
|
Removed Library-Observe label. |
|
This comment was originally written by blink.ey...@gmail.com Same issue: https://groups.google.com/a/dartlang.org/forum/#!topic/web/zTqgqnxeNcw |
|
@justin, does polymer_expressions implement: <template repeat="{{key, value in items}}"> ? That would be a pretty clean solution here. it's implemented by polymer-js, but not sure if we implemented it yet Anyway, it's tricky to solve this via ObservableMap[1]... it's a really simple wrapper class that doesn't know anything about how "keys" and "values" are implemented under the covers. Maybe a workaround is to notify a property change on "keys"/"values" properties, which isn't quite the right semantics, but should cause the system to refresh things. cc @justinfagnani. |
|
ah, just noticed that notifying "keys" and "values" isn't really possible because there's no meaningful old/new values. so a fix in polymer_expressions seems most likely Removed Pkg-Observe label. |
|
Set owner to @jmesserly. |
|
https://codereview.chromium.org/213743012/ Added Started label. |
|
Added Fixed label. |
|
Note: I fixed it in pkg:observe, the "for key, value in items" issue is still outstanding |
|
actually, I think I misunderstood the syntax in polymer-expressions, the feature is for array indexes: https://github.com/Polymer/polymer-expressions/blob/master/tests/tests.js#L1532 well, either way, we now support ".keys" and ".values" so everyone should be unblocked :-) |
|
This issue has been moved to dart-archive/observe#54. |
This issue was originally filed by shaile...@google.com
This code should work, but does not:
<polymer-element name="my-example">
<script type="application/dart" src="myexample.dart"></script>
<template>
<style></style>
<div>
<ul>
<template repeat="{{ entry in map.values }}">
<li>{{ entry }}</li>
</template>
</ul>
<button on-click="{{add}}">Add</button>
</div>
</template>
</polymer-element>
@CustomTag('my-example')
class MyExample extends PolymerElement {
@observable Map<int, String> map = toObservable({});
int i = 0;
MyExample.created() : super.created();
void add() {
map[i++] = i.toString();
}
}
Rewriting the example using a list instead of a map, appending the value of i to that list, and using template repeat correctly displays the elements of the list in the UI. So, toObservable() works with a list, but does not work with a Map in this context.
Also, changing the value of existing keys updates the UI. So, for instance, changing the toObservable() part to the following:
@observable Map<int, String> map = toObservable({1: 'one': 2: 'two'});
correctly shows the map values in the <ul>. When map[1] and map[2] are changed by add(), the new values are correctly displayed. New map entries, however, still are not displayed.
The text was updated successfully, but these errors were encountered: