Dart js-interop with jquery ui

Question

我是DART的新手，我很难从JS-Interop库开始。我想在我的页面上添加一个从jQuery UI的滑块，但是我不知道如何从DART中进行slider（）设置调用。JS-Interop是正确的方法吗？对此有所帮助。

void main() {
  js.scoped(() {
    var slider = query('#slider-range');
    var options = js.map({
      'range': true,
      'values': [ 17, 67 ]
    });
    // This doesn't work. Element has no method named slider.
    slider.slider(options);
    // In javascript it's done like this:
    // $( "#slider-range" ).slider({
    //   range: true,
    //   values: [ 17, 67 ]
    // });
    // This alert works.
    js.context.alert('Hello from Dart via JS');
  });
}

Answer 1

在您的情况下，您必须使用 js.context。范围'）。基本上， js.context 允许访问任何JavaScript变量。通过使用js.Context。$ ，您可以在Dart side上访问 jquery javascript对象（即 $ ）。

import 'dart:html';
import 'package:js/js.dart' as js;
void main() {
  js.scoped(() {
    var slider = js.context.$('#slider-range');
    var options = js.map({
      'range': true,
      'values': [ 17, 67 ]
    });
    slider.slider(options);
  });
}

Answer 2

另一个示例代码：

import 'package:js/js.dart' as js;
js.context.jQuery();
var context = js.context;  
var param = js.map({ 'modal': true, "width":1000, "height":600});
js.context.jQuery("#dialog").dialog(param); 

在html

中

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

上述代码使用jQuery打开DIV。