Question

在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 文件，因为没有使用自定义元素。

Answer 1

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

从https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
将<button on-click="increment">{{counter}}</button>插入xslambookform.html
随时随地插入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;
  }

运行slambook.html并按下按钮。请参阅控制台：

增量

计数器设置为1

增量

计数器设置为2

Answer 2

事实证明，我试图实现的目标是可能的。要使其正常工作，您需要在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 ）。

将按钮绑定到Polymer中的可观察对象

2 个答案: