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.$('#slider-range')而不是query('#slider-range')。基本上，js.context允许访问任何 Javascript 变量。通过使用js.context.$您可以访问dart 端的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);
  });
}