2014-12-07 3 views
1

내가 사용 ScalaJS 프로젝트를 만들었습니다Scala.js를 사용하여 javascript 함수를 만드는 방법은 무엇입니까?

http://www.scala-js.org/doc/tutorial.html

http://www.scala-js.org/doc/faq.html에서 문서를 읽기를, 생성하고 자바 스크립트 함수를 호출하는 것은 설명하는 것이하지 않는 것?

JavaScript 함수를 만들고 호출하려면 어떻게해야합니까?

<head> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
</head> 

을하지만 어떻게 내가 ScalaJS를 사용하여 아래의 코드를 만들려면 어떻게해야합니까 :

나는 수동으로 index.html을에 머리 요소에 D3를 추가 할 것입니다?

$(document).ready(function() { 

    var svgContainer = d3.select("body").append("svg") 
      .attr("width", 1200) 
      .attr("height", 1200) 
      .attr("text-align", "center"); 

    testFunction(svgContainer); 
}); 

<script> 
function testFunction(svgContainer) { 
    alert(svgContainer) 
} 
</script> 

전체 index.html을 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>Example Scala.js application</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
</head> 
<body> 

<h1>Example Scala.js application - full-optimized version</h1> 

<p>After having compiled and full-optimized properly the code for the application 
(using `sbt fullOptJS`), you should see "It works" herebelow. 
See README.md for detailed explanations.</p> 

<div id="playground"> 
</div> 

<script type="text/javascript" src="./target/scala-2.10/my-project-fastopt.js"></script> 
<script type="text/javascript" src="./target/scala-2.10/my-project-launcher.js"></script> 

</body> 
</html> 

업데이트 : fastOptJS를 사용하여 구축 할 때 callFunction에서

object ScalaJSExample extends js.JSApp { 
    def main(): Unit = { 

    jQuery(dom.document).ready {() => { 

     val svgContainer = "d3.select(\"body\").append(\"svg\").attr(\"width\", 1200).attr(\"height\", 1200).attr(\"text-align\", \"center\")"; 
     val function = "callFunction(svgContainer)"; 
     } 
    } 
    } 

    def callFunction(svgContainer): Unit = { 

    } 
} 

이 svgContainer가 입력해야하는 자바 스크립트 함수로 생성 callFunction 것인가?

jQuery(dom.document).ready { 내에서 svgContainertestFunction을 만드는 올바른 방법입니까?

답변

5

Scala.js에서 scala.FunctionN은 암시 적으로 js.FunctionN으로 변환 될 수 있으므로, 기본적으로 아무 것도 할 필요가 없습니다. JavaScript 호출에 람다를 전달하십시오. 이 예는 "Scala.js의 설치 UI"에서 in Step 5 of the the tutorial입니다. 코드의 경우, 그 결과는 다음과 같습니다

jQuery(dom.document).ready {() => 
    val svgContainer = ... 
} 

당신은 calling JavaScript guide이에 대한 자세한 정보를 찾을 수 있습니다.

업데이트 :

import scala.scalajs.js 
import org.scalajs.dom   // see https://github.com/scala-js/scala-js-dom 
import org.scalajs.jquery.jQuery // see https://github.com/scala-js/scala-js-jquery 

object ScalaJSExample extends js.JSApp { 
    val d3 = js.Dynamic.global.d3 // assuming you don't have static types for d3, here 

    def main(): Unit = { 
    jQuery(dom.document).ready {() => 
     val svgContainer = 
     d3.select("body").append("svg") 
      .attr("width", 1200) 
      .attr("height", 1200) 
      .attr("text-align", "center") 
     testFunction(svgContainer) 
    } 
    } 

    def testFunction(svgContainer: js.Dynamic): Unit = { 
    dom.alert(svgContainer.toString()) 
    } 
} 

당신이 볼 수 있듯이 :

  1. Scala.js 정적 유형이 라이브러리의 다음

    는 전체 자바 스크립트 스 니펫 (snippet)의 번역이다 (예 : DOM 및 jQuery) 이러한 정적 유형을 사용하는 것이 가장 좋습니다. 여기에 ready(), dom.documentdom.alert이 정적 형식의 방식으로 사용됩니다. 정적 유형이없는 경우

  2. , 당신은 당신이 def과 기능을 정의하는 일반 구문 (문자열이 아니라)
  3. 를 사용하여 동적으로 입력 된 방법으로 자바 스크립트 값을 조작 할 수 js.Dynamic를 사용할 수 있습니다. JavaScript 함수로 컴파일되었는지 아닌지는 중요하지 않습니다. 스칼라 코드를 생각하지 않고 작성하면 컴파일러에서 작업을 수행합니다.
+0

업데이트 내용을 참조하십시오. 함수에 svgContainer 매개 변수를 전달하고 동일한 함수를 호출하는 방법을 잘 모르겠습니다. –

+0

@ blue-sky 내 대답을 업데이트했습니다. – sjrd

관련 문제