until lately I could use bindProperty like shown below or in this question, but that has changed with 0.8.0 and I don't know how to change my code to get the old behaviour (doSomething() gets called):
<polymer-element name="my-login" attributes="model">
<template>
<template if="{{"model.isLoggedIn}}">
...
</template>
</template>
<script type= ... ></script>
</polymer-element>
.
#CustomTag("my-login")
class MyLogin extends PolymerElement with ObservableMixin {
LoginModel model;
#override
inserted() {
void doSomething() {
...
}
logoutChangeSubscription = bindProperty(model, #isLoggedIn, () => doSomething());
}
}
class Model extends Object with ObservableMixin {
#observable bool isLoggedIn = false;
}
With Polymer.dart 0.8 or greater, you can also use this convenience form:
isLoggedInChanged(oldValue) {
doSomething();
}
Notice how you can create a method inside your PolymerElement that uses a name of yourFieldName*Changed
There's also onPropertyChange as defined here: http://api.dartlang.org/docs/bleeding_edge/observe.html#onPropertyChange
From the docs:
class MyModel extends ObservableBase {
StreamSubscription _sub;
MyOtherModel _otherModel;
MyModel() {
...
_sub = onPropertyChange(_otherModel, const Symbol('value'),
() => notifyProperty(this, const Symbol('prop'));
}
String get prop => _otherModel.value;
set prop(String value) { _otherModel.value = value; }
}
Polymer.dart >= 1.0.0
#Property(observer: 'doSomething') bool isLoggedIn;
#reflectable
void doSomething(bool newValue, bool oldValue) => ...
or
#Observe('isLoggedIn')
void doSomething(event, detail) => ...
Polymer.dart < 1.0.0
Ok, found it
new PathObserver(model, "isLoggedIn").changes.listen((e) => doSomething());
It seems that the syntax has changed a little bit.
The syntax of the solution proposed by Günter now seems to be:
new PathObserver(model, "isLoggedIn").open((e) => doSomething());
Related
I have a custom element <test-object> which looks like this:
#PolymerRegister('test-object')
class TestObject extends PolymerElement with TestBehavior {
TestObject.created() : super.created() {
}
}
The TestBehavior:
#reflectable
class TestModel extends JsProxy {
#Property(notify: true)
num value = 0;
PolymerElement _target;
TestModel(PolymerElement target) {
_target = target;
}
changeBy(num by) {
value += by;
_target.set('testModel.value', value);
}
}
#behavior
abstract class TestBehavior implements PolymerBase {
#Property(notify: true)
TestModel testModel;
PolymerElement _instance;
static ready(instance) {
instance._init(instance);
}
static created(instance) {
instance._instance = instance;
}
_init(PolymerElement instance) {
set('testModel', new TestModel(instance));
}
}
My main app looks like this:
<dom-module id="main-app">
<style>
:host {
display: block;
#apply(--layout-center-center);
}
</style>
<template>
<div>{{testObject.testModel.value}}</div>
<test-object id="obj"></test-object>
</div>
</template>
</dom-module>
#PolymerRegister('main-app')
class MainApp extends PolymerElement {
#Property(notify: true)
TestObject testObject = null;
MainApp.created() : super.created();
ready() {
set('testObject', testObject = $$('#obj') as TestObject);
}
#Listen('click')
clicked([_]) {
testObject.testModel.changeBy(1);
}
#Observe('testObject.testModel.*')
valueChanged([_]) {
window.console.log('Value was changed');
}
}
This is a very simple toy example. I click <main-app> which causes the value in testModel to increase (this works). However, <main-app> doesn't update the div which should display the value. Also, valueChanged is never invoked.
I want to notify testObject about the valueupdate in testModel and propagate this notification up to main-app which than should update its UI via data binding.
Why is this not working?
You can't have a property in model classes, only in components
#Property(notify: true)
num value = 0;
should just be
#reflectable
num value = 0;
The set and notifyPath methods should really be called from your element classes, not the models. This actually simplifies your code a lot, and makes everything work as expected as well. Below I have pasted the new MainApp, TestModel, and TestBehavior classes (I also made some other minor edits).
#PolymerRegister('main-app')
class MainApp extends PolymerElement {
// Defines a read-only property (implicit because of the getter).
#property
TestObject get testObject => $['obj'];
MainApp.created() : super.created();
// I added the 2nd optional argument here, to fix a reflectable error
#Listen('click')
clicked([_, __]) {
// Notify directly here, this is the primary change.
notifyPath('testObject.testModel.value', testObject.testModel.changeBy(1));
}
#Observe('testObject.testModel.*')
valueChanged([_]) {
window.console.log('Value was changed');
}
}
// Removed the `_instance` field.
class TestModel extends JsProxy {
// use #reflectable instead of #Property(notify: true)
#reflectable
num value = 0;
TestModel();
num changeBy(num by) {
value += by;
// Added a return value for convenience
return value;
}
}
#behavior
abstract class TestBehavior implements PolymerBase {
#Property(notify: true)
TestModel testModel = new TestModel();
}
I am trying to understand how observable getters work when they use other class instance properties:
When I bind the implicit getter/setter pair 'name' it updates in the input and in the div and everything is synced nicely.
However the explicit getter 'fullname' is not updating in the HTML. Is there a way to make that work (basically the 'fullname' in the element binding should update as well)?? Maybe I am missing a setter, but then again setter does not make sense here...
Very simple example to demonstrate:
test-element.html
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="test-element">
<template>
<input value="{{ds.name}}">
<div>{{ds.name}}</div>
<div>{{ds.fullname}}</div>
</template>
<script type="application/dart" src="test1.dart"></script>
</polymer-element>
test-element.dart
import 'package:polymer/polymer.dart';
import 'package:popoli/sysmaster-settings.dart';
#CustomTag('test-element')
class TestElement extends PolymerElement {
#observable VerySimpleTest ds;
TestElement.created() : super.created() {
ds = new VerySimpleTest()..name = 'Peter';
}
}
ds.dart
class VerySimpleTest extends Observable {
#observable String name = '';
#observable String get fullname => 'Test: $name';
VerySimpleTest() : super();
}
You need to notify Polymer that a value has changed the getter depends on.
String set name(String val) {
name = notifyPropertyChange(#fullname, name, val);
}
or this should work too
#ComputedProperty('Test: $name') String get fullname => 'Test: $name';
See http://japhr.blogspot.co.at/2014/08/the-polymerdart-computedproperty.html for more details.
Some minor adaptations on Günter’s proposal make it work for me:
class VerySimpleTest extends Observable {
String _name = '';
// #observable // apparently, not even required
String get name => _name;
// #observable // apparently, not even required
String get fullname => 'Test: $name';
set name(String val) {
String oldVal = _name;
_name = notifyPropertyChange(#name, oldVal, val);
_name = notifyPropertyChange(#fullname, oldVal, val);
}
}
I am trying to understand how observable getters work when they use other class instance properties:
When I bind the implicit getter/setter pair 'name' it updates in the input and in the div and everything is synced nicely.
However the explicit getter 'fullname' is not updating in the HTML. Is there a way to make that work (basically the 'fullname' in the element binding should update as well)?? Maybe I am missing a setter, but then again setter does not make sense here...
Very simple example to demonstrate:
test-element.html
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="test-element">
<template>
<input value="{{ds.name}}">
<div>{{ds.name}}</div>
<div>{{ds.fullname}}</div>
</template>
<script type="application/dart" src="test1.dart"></script>
</polymer-element>
test-element.dart
import 'package:polymer/polymer.dart';
import 'package:popoli/sysmaster-settings.dart';
#CustomTag('test-element')
class TestElement extends PolymerElement {
#observable VerySimpleTest ds;
TestElement.created() : super.created() {
ds = new VerySimpleTest()..name = 'Peter';
}
}
ds.dart
class VerySimpleTest extends Observable {
#observable String name = '';
#observable String get fullname => 'Test: $name';
VerySimpleTest() : super();
}
You need to notify Polymer that a value has changed the getter depends on.
String set name(String val) {
name = notifyPropertyChange(#fullname, name, val);
}
or this should work too
#ComputedProperty('Test: $name') String get fullname => 'Test: $name';
See http://japhr.blogspot.co.at/2014/08/the-polymerdart-computedproperty.html for more details.
Some minor adaptations on Günter’s proposal make it work for me:
class VerySimpleTest extends Observable {
String _name = '';
// #observable // apparently, not even required
String get name => _name;
// #observable // apparently, not even required
String get fullname => 'Test: $name';
set name(String val) {
String oldVal = _name;
_name = notifyPropertyChange(#name, oldVal, val);
_name = notifyPropertyChange(#fullname, oldVal, val);
}
}
I can't seem to sort an ObservableList<T> and have the sort reflected in my Polymer element. Here's a sample element definition:
class PeopleElement extends PolymerElement {
ObservableList<Person> people = toObservable(new List<Person>());
PeopleElement.created() : super.created();
}
And here is the definition of the Person class:
class Person {
String name;
Person(this.name);
int compare(Person p) {
return name.compareTo(p.name);
}
}
Now, I want to add a sort function to the PeopleElement class:
class PeopleElement extends PolymerElement {
...
ObservableList<Person> sortByName() {
people.sort((Person a, Person b) {
a.compare(b);
}
}
}
I've also tried the above function as returning void and that didn't seem to work either. Does anything jump out as being incorrect here?
Your Person class needs to implement Comparable with the method compareTo instead of compare
library people_element;
import 'dart:async';
import 'package:polymer/polymer.dart';
class Person implements Comparable{
String name;
Person(this.name);
#override
int compareTo(Person other) {
return name.compareTo(other.name);
}
}
#CustomTag('people-element')
class PeopleElement extends PolymerElement {
var people = toObservable(new List<Person>());
PeopleElement.created() : super.created() {
print('PeopleElement');
}
#override
void enteredView() {
people.add(new Person('c'));
people.add(new Person('a'));
people.add(new Person('f'));
people.add(new Person('b'));
super.enteredView();
new Timer(new Duration(seconds: 3), () => sortByName());
}
ObservableList<Person> sortByName() {
people.sort();
}
}
<polymer-element name="people-element">
<template>
<template repeat="{{p in people}}">
<p>{{p.name}}</p>
</template>
</template>
<script type="application/dart" src="people_element.dart"></script>
</polymer-element>
I'm setting up custom Polymer elements that need to display data from the model (Property objects that need to be passed around).
I can successfully display the values of the properties, but when I update a value inside a Property object, the value is not updated inside the element.
What am I missing? I based myself on the following examples:
https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/bind_component_field_to_model_field
https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/getter_setter_as_attribute
wb-control-text.html
<polymer-element name="wb-control-text">
<template>
<div>
<label for="{{id}}">{{label}}</label>
<input type="text" id="{{id}}" value="{{value}}" />
<button on-click="{{updateValue}}">Update me</button>
</div>
</template>
<script type="application/dart" src="wb-control-text.dart"></script>
</polymer-element>
wb-control-text.dart
import "package:polymer/polymer.dart";
import "package:rqn_workbench/wb-property.dart";
#CustomTag("wb-control-text")
class WorkbenchControlTextElement extends PolymerElement {
final TextProperty _idProperty = new TextProperty("id", value: "1");
final TextProperty _valueProperty = new TextProperty("value", value:"Bla");
final TextProperty _labelProperty = new TextProperty("label", value:"Label!");
WorkbenchControlTextElement.created() : super.created();
#published String get id => _idProperty.value;
void set id(String id) { _idProperty.value = id; }
#published String get value => _valueProperty.value;
void set value(String value) { _valueProperty.value = value; }
#published String get label => _labelProperty.value;
void set label(String label) { _labelProperty.value = label; }
void updateValue() {
value += "Bla";
print(value); // Will print the appended value
}
}
wb-property.dart
library workbench_property;
import "package:polymer/polymer.dart";
#observable
class Property {
String key;
}
#observable
class TextProperty extends Property {
String value;
TextProperty ( String key, {String value} ) {
this.key = key;
this.value = value;
}
}
The solution was to use #reflectable on the getters and setters, so it could be picked up by the PathObserver.