Bind button to observable in Polymer

StackOverflow https://stackoverflow.com/questions/17947642

  •  04-06-2022
  •  | 
  •  

Question

Using polymer in Dart I want to observe a value and bind a button to a function that changes it. The following sample code (test.dart) should clarify what I am trying to do

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:observe/observe.dart';
import 'package:mdv/mdv.dart' as mdv;

class App extends Object with ObservableMixin {
  int _counter = 0;

  int get counter => _counter;
  void set counter(int c) {
    print("counter set to $c");
    int oldValue = _counter;
    _counter = notifyPropertyChange(const Symbol('counter'), _counter, c);
  }

  increment(var event) {
    print("increment");
    counter = counter + 1;
  }
}

main() {
  mdv.initialize();

  var app = new App();
  query("#tmpl1").model = app;
}

Used with this HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
      <template id="tmpl1" bind>
        <button on-click="increment">{{counter}}</button>
      </template>
    <script type="application/dart" src="test.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

I would expect when the button is clicked that increment inside the App class is invoked, but nothing happens. I am sure I am overlooking something simple, as surely this must be possible.

Note to run the example code above you do not need to create a build.dart file as no custom-elements are being used.

Was it helpful?

Solution 2

It turns out that what I tried to achieve is possible. To get it working you need to include the following in the HTML 

<script src="packages/polymer/boot.js"></script>

then the following works

 <polymer-element name="x-app">
    <template>
      <button on-click="increment">{{counter}}</button>
    </template>
    <script type="application/dart">
      import 'package:polymer/polymer.dart';

      @CustomTag('x-app')
      class XApp extends PolymerElement with ObservableMixin {
        @observable int counter = 0;

        increment(event, detail, target) {
          print("increment");
          counter++;
          Observable.dirtyCheck();
        }       
      }
    </script>
  </polymer-element>

  <x-app></x-app>

And best of all it works without the need for a build step (i.e. no more build.dart).

OTHER TIPS

I have just read the target10 polymer example and I am not sure if you are looking for the kind of solution I am going to post.

  1. get Target 10:polymer example from https://github.com/dart-lang/dart-tutorials-samples/tree/master/web

  2. Insert <button on-click="increment">{{counter}}</button> anywhere into one of the divs in xslambookform.html

  3. Insert anywhere into xslambookform.dart

``

  int _counter=0;
  int get counter => _counter;

  void set counter(int c) {
    print("counter set to $c");
    int oldValue = _counter;
    _counter = notifyPropertyChange(const Symbol('counter'), _counter, c);
  }

  void increment(var e, var detail, Element target) {
    print("increment");
    counter = counter + 1;
  }

  1. Run slambook.html and press your button. See in console:

    increment

    counter set to 1

    increment

    counter set to 2

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top