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

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(); 将返回一个真实的FpsCounter 实例，调用calculateFps(...) 将起作用。

添加到您的 fps_counter.dart 文件顶部：

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

需要在pubspec.yamlpolymertransformer部分添加入口页面

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

你需要导入包含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();
}

现在可以了