我正在使用 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]);
}
}
问题是
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。
任何人都可以帮忙吗?
感谢您阅读到最后:)