My problem is that observable and published variables from polymer-elements are not working. More precisely, they are not working if I imported the elements from a package. They are displayed correctly, but they do not react if their value changed.
If i load the same element directly from the main project everything works fine!
I published the complete project on github.com and added a README --> here
So this is what i have done:
I created a package which contains a polymer-element. The package is called foo_package and my polymer-element uses foo.html and foo.dart. It is named poly-foo.
foo_package structure
Now I create a new project and prepare everything for using polymer-elements. In yaml i add a dependency to my package
pubspec.yaml
[...]
dependencies:
foo_package:
path: D:\User\UserName\dart\foo_package
[...]
Now I import foo.html in my html file
<link rel="import" href="packages/foo_package/foo.html">
and implement my custom tag
<poly-foo></poly-foo>
Finally I run my main file and everything looks alright. My element gets displayed the way i want it.
But observables and published variables are not working.
What am I doing wrong?
foo.html
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="poly-foo">
<template>
Counter:{{counter}}
<button on-click="{{increment}}">Up!</button>
<script type="application/dart" src="foo.dart"></script>
</template>
</polymer-element>
foo.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
@CustomTag('poly-foo')
class PolyFoo extends PolymerElement {
@observable int counter = 0;
PolyFoo.created() : super.created();
void increment(Event e, var detail, Node target) {
counter = counter + 1;
}
}
