Question

如何使用<template is="dom-bind">绑定到事件处理程序？

Answer 1

<强> index.dart

import 'dart:html';
import 'package:polymer/polymer.dart';

DomBind template;

main() async {
  await initPolymer();
  template = document.querySelector('#t');

  final model = new MyModel();
  template['model'] = model;
  // Polymer 1.0 event handlers can't have `.` in declarative syntax 
  // and therefore need to be assigned to the template directly.
  template['buttonTap'] = model.buttonTap;
}

class MyModel extends JsProxy {
// reflectable is Polymer 1.0.0-rc.2 (was @eventHandler in rc.1)
  @reflectable 
  String value = 'something';

  @reflectable
  buttonTap([Event e, args]) {
    print(template.$['mybutton'].id);
    print('tap! $value');
  }
}

<强> index.dart

<!doctype html>
<html>
  <head>
    <link rel="import" href="packages/polymer/polymer.html">
    <script src="packages/web_components/webcomponents-lite.min.js"></script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <template id="t" is="dom-bind">
      <div>Model: <span>{{model}}</span></div>
      <div>Say something: <input value="{{model.value::change}}"></div>
      <div>You said: <span>{{model.value}}</span></div>
      <button id="mybutton" on-tap="buttonTap">Tap me!</button>
    </template>
    <script type="application/dart" src="index.dart"></script>
  </body>
</html>

如何使用`<template is =“dom-bind”>`绑定到事件处理程序

1 个答案: