有没有人尝试过在 Dart 中使用 Firebase javascript 库？答案

【问题标题】：Has anyone tried using the Firebase javascript library from within Dart?有没有人尝试过在 Dart 中使用 Firebase javascript 库？
【发布时间】：2013-02-01 00:08:06
【问题描述】：

Firebase 键值存储看起来很有趣，与 Dart 的 HTML 框架一起使用会很有趣。

他们提供了一个 JavaScript 库来读取/写入他们的模型。有没有人尝试将它与 Dart 一起使用？

我的计划（基于很少的 Dart 知识）是：

在我的 html 中包含他们的库
加载 js.dart 包
通过 js.dart 实例化模型
通过模型读写。

这看起来是正确的方法吗？或者，有更好的方法吗？

谢谢

【问题讨论】：

[Firebase 创始人在这里] 迄今为止，我不知道有人尝试这样做，但我很想看到它起作用。如果您的实现工作正常，请告诉我们！
嗨，安迪，你能做到吗？我正在考虑为个人项目做同样的事情。
有趣的是你应该问。我刚回来看 Dart。有很多值得喜欢的地方。我只是希望它实际上是 Smalltalk ;-) 无论如何，简短的回答是“不”，但线程底部的一些信息看起来很有希望。

标签： dart firebase

【解决方案1】：

您可以通过js package 使用任何Javascript 库。

对于Firebase，您必须：

将js package 添加到您的pubspec.yaml

dependencies:
  js: any

将以下 <script> 添加到您的 html 页面：

<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script type="application/dart" src="youDartCode.dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>

使用Firebase Javascript SDK 到js package。类似的东西：

import 'package:js/js.dart' as js;

void main() {
  final myDataRef = new js.Proxy(js.context.Firebase,
      'https://xxx.firebaseio-demo.com/');
  myDataRef.on('child_added', (snapshot, String previousChildName) {
    final message = snapshot.val();
    print("${message.name} : ${message.text}");
  });
  myDataRef.push(js.map({"name": 'myName', "text": 'js interop rocks'}));
}

上面的 Dart 代码等价于下面的 JavaScript 代码：

var myDataRef = new Firebase('https://xxx.firebaseio-demo.com/');
myDataRef.on('child_added', function(snapshot, previousChildName) {
  var message = snapshot.val();
  console.log(message.name + " : " + message.text);
}));
myDataRef.push({name: 'myName', text: 'js interop rocks'});

基本上：

当你必须实例化一个Javascript对象时，使用new js.Proxy(js.context.MyJavascriptObjectName, arg1, arg2, arg3))，
当您必须提供 Javascript 匿名对象时，请使用 js.map({'attr1', value1}, {'attr2', value2})。

【讨论】：

太棒了！真的非常感谢
自从这个初始线程以来已经过去了很多时间。现在 pub 中有一个 firebase 包：pub.dartlang.org/packages/firebase
在较新版本的 dart 中，与 javascript interop 交互的语法发生了变化。此示例不适用于 Firebase 3.0。

【解决方案2】：

现在 Dart 中有一个 firebase.js 库的包装器：https://github.com/firebase/firebase-dart/（也可在 pub 上找到）。它使用了 dart:js，正如在这个线程中讨论的那样，所以仍然需要包含 firebase.js！

【讨论】：

【解决方案3】：

当 Dart 到达这里时，我收到了错误消息“Breaking on exception: ReferenceError: ReceivePortSync is not defined”。

    js.scoped (() {

    });

需要一行额外的代码才能将 Firebase 与 Dart 结合使用。添加行“packages/browser/interop.js”

    <script type="application/dart" src="ScrollViewDemo.dart"></script>
    <script src="packages/browser/dart.js"></script>
    <script src="packages/browser/interop.js"></script>   
    <script src='https://cdn.firebase.com/v0/firebase.js'></script>

------------------ 8 月 15 日编辑 ----------

js.scoped is no longer needed in the newer version of interopt.js

【讨论】：

js 包在我提交答案后引入了interop.js。我已经更新了它。谢谢。