Question

我想使用聚合物paper-button。它被用在程序的顶层，例如不在另一个PolymerElement内。

如何为此onClick注册onTap或paper-button处理程序？ PaperButton类中不存在此类方法，并且HTML文件中的声明作为属性不可能超出PolymerElement派生类的范围。

除非您使用<template>指令。 <template>版本适用于普通版<button>，但我无法弄清楚如何显示<paper-button>！

以下是显示问题的最简单的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>Paper Button</title>

  <link rel="import" href="packages/polymer/polymer.html">
  <link rel="import" href="packages/paper_elements/paper_button.html">
</head>

<body unresolved>
  <template is="auto-binding-dart">
    <paper-button id="mybutton" on-tap="{{buttonTap}}">Button</paper-button>
  </template>

  <script type="application/dart">
    import 'dart:html';
    import 'package:polymer/polymer.dart';
    import 'package:template_binding/template_binding.dart';

    main() {
      initPolymer().run(() {
        Polymer.onReady.then((_) {
          var template = document.querySelector('template');
          templateBind(template).model = new MyModel();
        });
      });
    }

    class MyModel extends Observable {
      buttonTap() => print('Clicked!');
    }
  </script>
</body>
</html>

如果我将其从paper-button更改为button 并，请删除paper-button的导入语句，然后按预期工作。但是如何使用paper-button或任何种类的聚合物元素呢？

Answer 1

更新

您使用下面建议的代码在评论中提到的错误消息

第一行会产生运行时错误


NoSuchMethodError：找不到方法：'model ='。


第二个提案会产生错误


异常：＆gt;未捕获错误：类型“TemplateElement”不是“模板”类型“AutoBindingElement”的子类型。

表示querySelector('template')不会返回<template is="auto-binding-dart">，而是返回其他template元素（导入的paper-button元素）。

使用不同的选择器（例如带有id）代替解决问题。

旧

这看起来不错，但这一行对我来说似乎不对（但如果它适用于Button，那么它也适用于paper-button。

templateBind(template).model = new MyModel();

相反

template.model = new MyModel();

大！应该做或

AutoBindingElement template = document.querySelector('template');
template.model = new MyModel();

以防止提示有关不存在的model setter。

您不应该需要此导入（仅在您自己的元素中）。

<link rel="import" href="packages/polymer/polymer.html">

我从不使用内联脚本。也许这会引起一个问题。

如何在<template>中显示Dart纸张按钮？</template>

1 个答案:

更新

旧