Question

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

的index.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]);
 }
}

问题是

msg1不形成对话框，btn1不执行我注册的鼠标点击事件。这意味着“js_main.js”中的JS脚本不起作用（没有错误消息）。我发现Polymer.dart的自定义元素实现了Shadow DOM，禁止从外部进行任何访问。这是问题的原因吗？
当我使用“pub build”将此Dart应用转换为JavaScript时，生成的产品可以在我的iPad mini（iOS6）的浏览器中运行。还行吧。但是，似乎jQueryUI-touch-punch效果不佳。因此，我无法从iPad mini访问任何拖动或调整大小的操作。

Dart SDK版本为1.2。

有人可以帮忙吗？

感谢您阅读到最后：）

Answer 1

您的jQuery元素选择代码$('#msg')，$('#btnx')将找不到shadowDOM中的任何元素。可能还有其他问题，但这个问题很明显。

jQueryUI和jQueryUI-touch-punch不能与Polymer.dart一起使用

的index.html

main_component.html

JS / js_main.js

main_component.dart

1 个答案: