0

我正在尝试在 Dart 中使用输入掩码jQuery 插件。当我尝试添加掩码的元素不在 Web 组件中时，该插件工作正常，但是当我将其添加到 Web 组件时，它不再工作。对于不起作用的代码，我可以$("#phone-number").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>

此代码不起作用：

<!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>
4

1 回答 1

1

这可能是由于组件在主循环运行一次之后才完全准备好，尝试添加一个 Timer 来启动这样的查询......

<!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>

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

于 2013-06-22T19:15:57.010 回答