0

在 Dart 中使用聚合物我想观察一个值并将一个按钮绑定到一个改变它的函数。以下示例代码（test.dart）应该阐明我要做什么

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;
}

与此 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>

我希望单击按钮时会调用App类中的增量，但没有任何反应。我确信我忽略了一些简单的事情，因为这肯定是可能的。

注意要运行上面的示例代码，您不需要创建build.dart文件，因为没有使用自定义元素。

4

2 回答 2

1

我刚刚阅读了 target10 聚合物示例，我不确定您是否正在寻找我要发布的那种解决方案。

  1. 从https://github.com/dart-lang/dart-tutorials-samples/tree/master/web获取 Target 10:polymer 示例

  2. 将<button on-click="increment">{{counter}}</button>任意位置插入到 xslambookform.html 中的一个 div 中

  3. 插入 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. 运行 slambook.html 并按下您的按钮。在控制台中查看：

    增量

    计数器设置为 1

    增量

    计数器设置为 2

于 2013-07-30T15:16:26.777 回答
0

事实证明，我试图实现的目标是可能的。要使其正常工作，您需要在 HTML 中包含以下内容

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

然后以下工作

 <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>

最重要的是，它无需构建步骤即可工作（即不再需要build.dart）。

于 2013-08-01T19:41:10.910 回答