1

我正在使用 jQueryUI 和 jQueryUI-touch-punch 和 Polymer.dart 开发一个小型 Dart 应用程序。当我不使用 Polymer.dart 时，一切正常。但是对于 Polymer.dart，出现了几个问题。这是我的代码。

索引.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Dart and jquery ui with Polymer</title>

  <!--- stylesheet --->
  <link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css">
  <link rel="stylesheet" href="dart_and_jquery_ui_with_polymer.css">
  <!--- ---------- --->

  <!--- JSLib --->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-2.1.0.min.js"><\/script>')</script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script>window.jQuery.ui || document.write('<script src="js/libs/jquery-ui-1.10.4.custom.min.js"><\/script>')</script>
  <script src="js/libs/jquery.ui.touch-punch-0.2.3.min.js"></script>
  <!--- ----- --->

  <link rel="import" href="main_component.html">
  <script type="application/dart">
  export 'package:polymer/init.dart';
  </script>
 </head>
 <body>
  <h1>Dart and jquery ui with Polymer</h1>

  <p>Hello world from Dart!</p>

  <!-- CUSTOM ELEMENT -->
  <main-component></main-component>

  <script src="packages/browser/dart.js"></script>
  <script src="packages/browser/interop.js"></script>
 </body>
</html>

main_component.html

<!DOCTYPE html>
<meta charset="utf-8">

<polymer-element name="main-component">
 <template>
  <div id="sample_container_id">
   <button id="btn1">OPEN JSVer</button>
   <button id="btn2">OPEN DartVer</button>

   <div id="msg1">
    Hello, world1!
    <div>
     <button>btn1</button>
     <button>btn2</button>
     <button>btn3</button>
     <button>btn4</button>
     <button>btn5</button>
    </div>
   </div>

   <div id="msg2">
    Hello, world2!
    <div>
     <button>btn1</button>
     <button>btn2</button>
     <button>btn3</button>
     <button>btn4</button>
     <button>btn5</button>
    </div>
   </div>
  </div>
 </template>

 <!-- JSScript -->
 <script src="js/js_main.js"></script>
 <!-- -------- -->

 <!-- DartScript -->
 <script type="application/dart" src="main_component.dart"></script>
 <!-- ---------- -->
</polymer-element>

js/js_main.js

$( function(){

 // The code in this JS file totally doesn't work...
 // But there is no error message in JS console...

 // btn1 config
 $('#btn1').click( function() {
  $('#msg1').dialog('open');
 } );

 // msg1 config
 $('#msg1').dialog({
  autoOpen: false,
  buttons: {
   "OK": function() {
    $(this).dialog('close');
   }
  },
  title: "Dialog1",
  resizable: false,
  modal: false,
  show: 'fold',
  hide: 'puff'
 });

 // btn2 and msg2 configs are implemented in Dart side.
} );

main_component.dart

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

@CustomTag('main-component')
class MainComponent extends PolymerElement {

 MainComponent.created() : super.created(){
  // Constructor...
 }

 @override
 void attached(){
  super.attached();

  // btn2 config
  js.context.callMethod(r'$', [ $['btn2'] ])
   ..callMethod('click', [ 
    ([arg]){
     js.context.callMethod(r'$', [ $['msg2'] ])
      ..callMethod('dialog', ['open']);
    } 
  ]);

  // msg2 config
  js.JsObject options = new js.JsObject(js.context['Object']);
  options['autoOpen'] = false;
  options['buttons'] = new js.JsObject(js.context['Object']);
  options['buttons']['OK'] = ([arg]){ 
   js.context.callMethod(r'$', [ $['msg2'] ])
    ..callMethod('dialog', ['close']);
  };
  options['title'] = "Dialog2";
  options['modal'] = false;
  options['show'] = 'fold';
  options['hide'] = 'puff';
  js.context.callMethod(r'$', [ $['msg2'] ])
   ..callMethod('dialog', [options]);
 }
}

问题是

  1. msg1 不形成对话框，btn1 不执行我注册的鼠标单击事件。这意味着“js_main.js”中的 JS 脚本不起作用（没有错误消息）。我发现 Polymer.dart 的自定义元素实现了 Shadow DOM，它禁止来自外部的任何访问。这是问题的原因吗？

  2. 当我使用“pub build”将此 Dart 应用程序转换为 JavaScript 时，生成的产品可以在我的 iPad mini(iOS6) 的浏览器中运行。还行吧。但是，jQueryUI-touch-punch 似乎效果不佳。所以我无法从我的 iPad mini 访问任何拖动或调整大小的操作。

Dart SDK 版本为 1.2。

任何人都可以帮忙吗？

感谢您阅读到最后：）

4

1 回答 1

1

您的 jQuery 元素选择代码$('#msg')，$('#btnx')不会在 shadowDOM 中找到任何元素。可能还有其他问题，但这是显而易见的。

于 2014-02-27T17:17:18.143 回答