3

我开始使用 Dart 进行前端开发，但遇到了一些麻烦。我需要的是通过 Js-Interop Dart 库使用一个名为 FlexSlider http://www.woothemes.com/flexslider/的 JQuery 插件。但是它不像纯 JavaScript 那样工作，我什至无法理解生成 Dart2Js 的一堆难以辨认的代码。

代码是这样的： 编辑 1：我修复了它，在导入 js.dart 时删除了 document.ready 并添加了 de js 文件夹。

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

void main()
{
    js.scoped(()
    {
        var element = js.context.jQuery('.flexslider');
        var options = js.map
        ({
            'animation' : 'slide'
        });
        element.flexslider(options);
    });
}

当然，我的 dart 脚本所在文件夹内的“packages”文件夹中有 js.dart 库文件。当然，我之前已经在 HTML 文档中加载了 JQuery，我在其中调用了 Dart2Js 生成的 JavaScript。

在用 Alexandre 的反馈进行更正后......比如现在 Google Chrome Inspector 抛出以下 2 个错误：

1 Uncaught ReferenceError: ReceivePortSync is not defined / (1):24 StackTrace: - ProxiedObjectTable / (1):24 - (anonymous function) / (1):162 - (anonymous function) / (1):511 - $. $defineNativeClass.nY indexz.dart.js:1986 - $.fb indexz.dart.js:1087 - 绑定 indexz.dart.js:1089 - $$.e7.P indexz.dart.js:612 - $$.J1 .P indexz.dart.js:454 - $.Zs indexz.dart.js:1215 - $.i indexz.dart.js:1217 - $.e indexz.dart.js:1220 - $.s indexz.dart。 js:1219 - $.E2 indexz.dart.js:1117 - $$.aX.vV indexz.dart.js:767 - $.Rq indexz.dart.js:1190 - (匿名函数) indexz.dart.js: 2830

2 未捕获的类型错误：无法调用 null indexz.dart.js:439 的方法 'get$g' StackTrace: - $$.J1.get$g indexz.dart.js:439 - $.sL indexz.dart.js: 1293 - $.fC indexz.dart.js:1205 - $.$defineNativeClass.JX indexz.dart.js:1907 - $.i indexz.dart.js:1217 - $.e indexz.dart.js:1220 - $ .s indexz.dart.js:1219 - $.E2 indexz.dart.js:1117 - $$.aX.vV indexz.dart.js:767 - $.Rq indexz.dart.js:1190 -（匿名函数） indexz.dart.js:2830

我在 HEAD 中的 HTML 代码是这样的：

<pre>
<head>
    <?php script('jquery') ?>
    <?php script('flexslider') ?>
        <script>
            jQuery = $.noConflict();
        </script>
    <?php script('indexz.dart') ?>
    <?php wp_head() ?>
<?php woo_head() ?>
    <?php style('global') ?>
    <?php style('flexslider') ?>
</head>
</pre>

我的 Slider 的 HTML 代码是这样的：

<pre>
<div class="flexslider col-full" style="margin-left: auto; margin-right: auto;">
    <ul class="slides">
        <li>
            <?php image('1.png') ?>
        </li>
        <li>
            <?php image('2.png') ?>
        </li>
        <li>
            <?php image('3.png') ?>
        </li>
        <li>
            <?php image('4.png') ?>
        </li>
    </ul>
</div>
</pre>

我清楚我正在使用 Wordpress 和 PHP，并且图像、脚本和样式 PHP 函数完美地为每个元素和文件生成相应的 HTML 标记。

提前致谢。

4

1 回答 1

2

如果您使用pub您的导入应该是import 'package:js/js.dart' as js;.

你也可以跳过js.context.$(document).ready，因为 Dartmain()也是如此。

由于Dart2js 错误，您必须使用别名$才能jQuery = $.noConflict();使 javascript 编译的代码正常工作。

最后，一个工作示例可能是：

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

void main() {
  js.scoped(() {
    var element = js.context.jQuery('.flexslider');
    var options = js.map({
      'animation' : 'slide'
    });
    element.flexslider(options);
  });
}

和

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='http://flexslider.woothemes.com/js/jquery.flexslider.js'></script>
<script>
  var jQuery = $.noConflict();
</script>
<script type="application/dart" src="my_script.dart"></script>
<script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"‌​&gt;</script>
于 2012-12-27T14:18:25.740 回答