使用jQuery進行Dart JavaScript互操作回調

如何將以下jquery代碼轉換爲Dart？我很難讓警報回調使用js.interop。使用jQuery進行Dart JavaScript互操作回調

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
    $(function() { 
    $('p').hide('slow', function() { 
     alert("The paragraph is now hidden"); 
    }); 
    }); 
</script>

任何幫助表示讚賞。

來源

2012-11-04 basheps

感謝您的問題！我不確定我自己，但事實證明這是可能的。 :)

首先，添加js您pubspec.yaml：

name: jquerydart 
description: A sample application 

dependencies: 
    js: any

然後，運行酒館安裝，無論是通過命令行或通過飛鏢編輯器。

然後，在你的飛鏢文件：

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

hideIsDone() { 
    window.alert('all done!'); 
} 

void main() { 
    js.scoped(() { 
    js.context.jQuery('p').hide(1000, new js.Callback.once(() => hideIsDone())); 
    }); 
}

注意，從JS回調到飛鏢，你需要創建一個回調對象。

另請注意，您不能使用$作爲jQuery變量，因爲dart2js也使用$。因此，在此期間，您需要在Dart代碼中使用jQuery。儘管如此，我們可以通過JS-Dart interop使用jQuery很酷，但Dart應該爲我們做到這一點。所以，我打開錯誤http://code.google.com/p/dart/issues/detail?id=6526

來源

2012-11-05 05:44:46

個人而言，我並不激動地看到人們試圖在Dart中使用jQuery（或者甚至在JS中）。我寧願希望看到對操作DOM（在Dart中已經相當不錯）等很好的基礎支持，然後再將其與動畫等好的庫結合使用。您創建的問題有助於這方面的工作。 –

我同意凱，但這是一個良好的橋樑服務，在這些早期。 –

我同意@KaiSellgren請明星的錯誤，並打開更多:) –

首先添加js依賴於你的pubspec.yaml：

dependencies: 
    js: any

通過使用JS-互操作您可以編寫幾乎相同的代碼作爲的JavaScript。

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

void main() { 
    js.scoped(() { 
    js.context.$(new js.Callback.once(($) { 
     $('p').hide('slow', new js.Callback.once(() { 
     js.context.alert("The paragraph is now hidden"); 
     })); 
    })); 
    }); 
}

的主要區別是：

你必須使用js.Callback.once或js.Callback.many設置你的回調函數。如果您的回叫只有一次致電，請使用js.Callback.once。
您的密碼必須用js.scoped包裝。基本上，managing proxy lifetimes在這裏是爲了防止內存泄漏。

這就是說，你可以簡化上面的代碼：

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

void main() { 
    js.scoped(() { 
    js.context.$('p').hide('slow', new js.Callback.once(() { 
     window.alert("The paragraph is now hidden"); 
    })); 
    }); 
}

的變化是：不需要

js.context.$(new js.Callback.once(($) {因爲main相當於jQuery的$(function)。
js.context.alert已經通過window.alert代替：這是更有效的直接使用DART功能，而不是與JS的通信。

來源

2012-11-05 07:39:31

不錯，甚至更好。 –

使用jQuery進行Dart JavaScript互操作回調

回答

相關問題