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

【问题标题】：Bind button to observable in Polymer将按钮绑定到 Polymer 中的可观察对象
【发布时间】：2013-07-30 12:56:00
【问题描述】：

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

【问题讨论】：

似乎最新的 SDK (0.6.13.0_r25630) 出现了问题，dart-polymer-dart-examples 中的示例停止使用此更新。

标签： dart dart-webui polymer

【解决方案1】：

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

从https://github.com/dart-lang/dart-tutorials-samples/tree/master/web获取目标10：聚合物示例
将<button on-click="increment">{{counter}}</button> 插入到 xslambookform.html 中的任一 div 中的任意位置
在 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

【讨论】：

感谢您的回答，但是此示例接缝依赖于 build.dart。我的例子没有使用的东西。我的印象是，只有在您制作自定义元素时才需要外部构建。

【解决方案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）。

【讨论】：