DartBot
commented
9 years ago Closed DartBot closed 9 years ago
DartBot
commented
9 years ago 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: oldMap = toObservable(new Map.from(oldMap));
probably terrible for performance in many situations but it gets me moving forward in development for now.
DartBot
commented
9 years ago 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> <head> <meta charset="utf-8"> <title>Sample app</title> <script src="packages/browser/dart.js"></script> </head> <body> <polymer-element name="my-element"> <template> <ul> <template repeat="{{key in items.keys}}"> <li>Key is: {{key}} Value is: {{items[key]}}</li> </template> </ul><br> <button on-click="{{test}}">test</button> </template> <script type="application/dart"> import 'package:polymer/polymer.dart'; import 'dart:html'; void main() { initPolymer(); }
@CustomTag('my-element') class MyElement extends PolymerElement { @observable Map<String, String> items = toObservable( {"1": "1", "2": "2"});
MyElement.created() : super.created() { }
void test(Event event, var detail, Node target) { items["1"] = "11"; items.remove("2"); items["3"] = "3"; } } </script> </polymer-element> <my-element></my-element>
</body> </html>
Attachments: [Screenshot from 2014-01-01 07:49:41.png](https://storage.googleapis.com/google-code-attachments/dart/issue-15407/comment-3/Screenshot from 2014-01-01 07:49:41.png) (6.65 KB) [Screenshot from 2014-01-01 07:50:14.png](https://storage.googleapis.com/google-code-attachments/dart/issue-15407/comment-3/Screenshot from 2014-01-01 07:50:14.png) (6.56 KB)
DartBot
commented
9 years ago DartBot
commented
9 years ago DartBot
commented
9 years ago This comment was originally written by blink.ey...@gmail.com
Same issue: https://groups.google.com/a/dartlang.org/forum/#!topic/web/zTqgqnxeNcw
DartBot
commented
9 years ago 
@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.
DartBot
commented
9 years ago
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. Added Library-PolymerExpressions label.
DartBot
commented
9 years ago DartBot
commented
9 years ago DartBot
commented
9 years ago
Note: I fixed it in pkg:observe, the "for key, value in items" issue is still outstanding
DartBot
commented
9 years ago
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 :-)
Originally opened as dart-lang/sdk#15407
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.