如何从外部调用聚合物元素实例的方法？

Question

我在 dart lang 上从头开始新项目，遇到了聚合物元素实例调用方法的问题。

例如我有 fps-counter 元素 (fpsCounter.dart):

@HtmlImport('fps_counter.html')
library fpsCounter;
import 'package:web_components/web_components.dart' show HtmlImport;
import "package:polymer/polymer.dart";
import "dart:html";

@CustomTag("fps-counter")
class FpsCounter extends PolymerElement
{
    @observable
    int fps;

    // counter that will cleared at 60 ticks
    int _counter = 0;

    // accumulator delta time for 60 ticks
    int _accumulator = 0;

    factory FpsCounter() => new Element.tag('fps-counter');

    FpsCounter.created() : super.created() {
        polymerCreated();
    }

    bool calculateFps(double delta)
    {
        if (_counter == 60)
        {
            fps = (60000 / _accumulator).round();
            _counter = 0;
            _accumulator = 0;

            print("$fps FPS");

            return true;
        }

        _accumulator += delta;
        _counter++;

        return false;
    }
}

并且想要从外部调用 calculateFps(0.016)，如下例所示：

void _initRenderer(OSE ose)
{
    FpsCounter fpsCounter = new FpsCounter();
    fpsCounter.calculateFps(0.016);
    document.body.children.add(fpsCounter);

}

但遇到问题：

Exception: Uncaught Error: Class 'HtmlElement' has no instance method 'calculateFps'.

我真的不想围绕它创建额外的通信，关于如何让它变得更好或如何调用方法的任何想法？谢谢。

另请查看可以提供帮助的其他文件：

pubspec.yaml

name: os
version: 0.0.1
dependencies:
  browser: ">=0.10.0 <0.11.0"
  ose:
    path: ./libs/ose
  polymer: any
transformers:
  - polymer

fps-counter.html

<link rel="import" href="packages/polymer/polymer.html" />
<polymer-element name="fps-counter">
    <template>
        <div>
            {{fps}} FPS
        </div>
    </template>
    <script type="application/dart" src="fpsCounter.dart"></script>
</polymer-element>

Answer 1

这看起来升级您的自定义元素失败，可能是由于缺少导入。否则 FpsCounter fpsCounter = new FpsCounter(); 会 return 一个真正的 FpsCounter 实例并且调用 calculateFps(...) 会起作用。

在您的 fps_counter.dart 文件之上添加：

@HtmlImport('fps_counter.html')
library some_library;
import 'package:web_components/web_components.dart' show HtmlImport;

您需要将入口页面添加到 pubspec.yaml polymer 变压器部分

transformers:
  - polymer:
      entry_points:
      - web/index.html

您需要导入包含 class FpsCounter 的 dart 文件，否则您无法使用 FpsCounter 作为类型注释或。

您需要保留 FpsCounter.created() : super.created() 构造函数，如果您不扩展 DOM 元素，则不要在其中调用 polymerCreated()。

我还必须更改您的 main() 方法。您初始化 Polymer 的方式仅适用于 >=1.0.0-rc.x，但对于 any，您不会获得预发布版，而是获得 0.16.3+3。另见 how to implement a main function in polymer apps

import 'os.dart';
import 'package:polymer/polymer.dart';
export 'package:polymer/init.dart';

@whenPolymerReady
init() async {
  OS os = new OS();
  os.start();
}

现在可以使用了

如何从外部调用聚合物元素实例的方法？

How to call method of the polymer element instance from outside?

dart

polymer

dart-polymer

另请查看可以提供帮助的其他文件：