Javascript 将jQuery输入掩码插件与Dart Web UI组件一起使用_Javascript_Jquery_Dart_Dart Js Interop

Javascript 将jQuery输入掩码插件与Dart Web UI组件一起使用

javascript jquery dart

Javascript 将jQuery输入掩码插件与Dart Web UI组件一起使用,javascript,jquery,dart,dart-js-interop,Javascript,Jquery,Dart,Dart Js Interop,我正在尝试在Dart中使用jQuery插件。当我试图添加掩码的元素不在web组件中时，插件工作正常，但当我将其添加到web组件中时，插件不再工作。对于不起作用的代码，我可以运行$（“#电话号码”）.mask（“（999）999-9999”）通过chrome控制台，工作正常此代码适用于： <!DOCTYPE html> <html> <body> <input id="phone-number" type="text"> &

我正在尝试在Dart中使用jQuery插件。当我试图添加掩码的元素不在web组件中时，插件工作正常，但当我将其添加到web组件中时，插件不再工作。对于不起作用的代码，我可以运行

$（“#电话号码”）.mask（“（999）999-9999”）通过chrome控制台，工作正常
此代码适用于：
<!DOCTYPE html>

<html>
  <body>
    <input id="phone-number" type="text">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="jquery.maskedinput.min.js"></script>
    <script type="application/dart">
      import 'package:js/js.dart' as js;

      void main() {
        js.scoped(() {
          var a = js.context.jQuery("#phone-number");
          a.mask("(999) 999-9999");
        });
      }
    </script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>


将“package:js/js.dart”导入为js；
void main（）{
js.scoped（）{
var a=js.context.jQuery（“电话号码”）；
a、 面罩（“（999）999-9999”）；
});
}

此代码不起作用：
<!DOCTYPE html>

<html>
  <body>    
    <element name="x-phone-number">
      <template>
        <input id="phone-number">
      </template>
    </element>
    <x-phone-number></x-phone-number>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="jquery.maskedinput.min.js"></script>
    <script type="application/dart">
      import 'package:js/js.dart' as js;

      void main() {
        js.scoped(() {
          var a = js.context.jQuery("#phone-number");
          a.mask("(999) 999-9999");
        });
      }
    </script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>


将“package:js/js.dart”导入为js；
void main（）{
js.scoped（）{
var a=js.context.jQuery（“电话号码”）；
a、 面罩（“（999）999-9999”）；
});
}
这可能是由于组件在主循环运行一次之前没有完全准备好，请尝试添加一个计时器来启动查询，如下所示
<!DOCTYPE html>

<html>
  <body>    
    <element name="x-phone-number">
      <template>
        <input id="phone-number">
      </template>
    </element>
    <x-phone-number></x-phone-number>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="jquery.maskedinput.min.js"></script>
    <script type="application/dart">
      import 'package:js/js.dart' as js;
      import 'dart:async';

      void _postMainSetup() {
        js.scoped(() {
          var a = js.context.jQuery("#phone-number");
          a.mask("(999) 999-9999");
        });
      }

      void main() {
        Timer.run(_postMainSetup);
      }
    </script>
    <script src="packages/browser/dart.js"></script>
    <script src="packages/browser/interop.js"></script>
  </body>
</html>


将“package:js/js.dart”导入为js；
导入“dart:async”；
void_postMainSetup（）{
js.scoped（）{
var a=js.context.jQuery（“电话号码”）；
a、 面罩（“（999）999-9999”）；
});
}
void main（）{
Timer.run（_postMainSetup）；
}

我还添加了interop.js脚本，这是最新SDK中所需的，因为jsinterop功能已从dart.js中分离出来