将 Skrollr 与 Dart 一起使用答案

【问题标题】：Using Skrollr with Dart将 Skrollr 与 Dart 一起使用
【发布时间】：2014-12-07 14:08:05
【问题描述】：

我正在尝试使用 Skrollr.js 在我的 Dart Web 应用程序中实现一些基于滚动的动画。到目前为止，我在 main() 中有以下内容：

main() {
  ScriptElement script = new ScriptElement()
    ..type = 'application/javascript'
    ..src = 'skrollr.min.js';
  document.body.children.add(script);
  ScriptElement script2 = new ScriptElement()
    ..type = 'application/javascript'
    ..innerHtml = 'var s = skrollr.init({forceHeight: false});';
  document.body.children.add(script2);

  js.context.callMethod('skrollr', ['init({forceHeight: false})']);
}

由于某种原因，我在运行时遇到以下错误：

Uncaught ReferenceError: skrollr is not defined and 
Exception: NoSuchMethodError: method not found: 'skrollr'

skroller.min.js 已被放置在 index.html 旁边的应用程序中，所以我正在寻求帮助以解决这里的问题。

另外，如果它是基于滚动动画的纯 Dart 替代品，我也很高兴知道这一点。

提前致谢。

【问题讨论】：

我觉得应该是：js.context['skrollr'].callMethod('init', [{'forceHeight': false}]).
@Robert，刚刚尝试过并得到“未捕获的 ReferenceError：skrollr is not defined”。
你应该使用 document.body.append 或者只是将
将脚本标签添加到 html 文件会有所帮助，但是当我尝试从 dart 访问 skrollr 函数时仍然会出现错误。
你的代码现在怎么样了？

标签： dart skrollr dart-js-interop

【解决方案1】：

只需使用：

import 'dart:js'; 

void main() { 
  void keyframe(element, name, direction) {
  } 

  context['skrollr'].callMethod('init', [{'keyframe': keyframe}]); 
}

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>skrollr</title> 
    <script type="text/javascript" src="skrollr.min.js"></script> 
  </head> 
  <body> 
    <script type="application/dart" src="main.dart"></script> 
    <script data-pub-inline src="packages/browser/dart.js"></script> 
  </body> 
</html>

这行得通。没问题。

【讨论】：