Dart 将按钮绑定到聚合物中可观察到的位置_Dart_Dart Webui_Polymer

Dart 将按钮绑定到聚合物中可观察到的位置

dart polymer

Dart 将按钮绑定到聚合物中可观察到的位置,dart,dart-webui,polymer,Dart,Dart Webui,Polymer,在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 ObservableMi

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


试验
{{counter}}

我希望当点击按钮时，应用程序类中的增量会被调用，但什么也不会发生。我确信我忽略了一些简单的事情，因为这肯定是可能的

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

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

获取目标10：来自

将

{{counter}}

任意位置插入xslambookform.html中的一个div中

将任意位置插入xslambookform.dart

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

增量

计数器设置为1

增量

计数器设置为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>


{{counter}}
进口“包装：聚合物/聚合物.dart”；
@CustomTag（'x-app'）
类XApp使用ObservaleMixin扩展了聚合关系{
@可观测整数计数器=0；
增量（事件、细节、目标）{
打印（“增量”）；
计数器++；
可观察的。dirtyCheck（）；
}       
}

最棒的是，它不需要构建步骤（即不再需要build.dart）。

感谢您的回答，但是这个示例并不依赖build.dart。我的例子没有用到的东西。我给他们的印象是，只有在您制作自定义元素时才需要外部构建。似乎最新的SDK（0.6.13.0R25630）破坏了某些东西，来自dart的示例聚合物dart示例停止使用此更新。

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