Question

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

代码是这样的：编辑1：我修复它删除document.ready并在导入js.dart时添加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的反馈纠正后...... 比如现在谷歌Chrome Inspector正在抛出以下2个错误：

1 未捕获的ReferenceError：未定义ReceivePortSync /（1）：24 StackTrace： - ProxiedObjectTable /（1）：24 - （匿名函数）/（1）：162 - （匿名函数）/（1）：511 - $。$ defineNativeClass.nY indexz.dart.js：1986 - $ .fb indexz.dart.js：1087 - bind 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 未捕获的TypeError：无法调用方法'get $ g'的null indexz.dart.js：439 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标记。

提前致谢。

Answer 1

如果您使用pub，则导入应为import 'package:js/js.dart' as js;。

您也可以跳过js.context.$(document).ready，因为Dart main()也会这样做。

由于Dart2js bug，您必须使用$对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"‌></script>

使用滑块的JQuery插件时飞镖不能像JavaScript那样工作

1 个答案: