在Scala.js中動態調用JavaScript

Question

我想知道如何在Scala.js中進行動態操作。 例如，查看教程中的jQuery示例，我的理解是您在scala中定義以下內容：

object TutorialApp extends JSApp {
  def appendPar(msg: String) = {
    jQuery("body").append("<p>" + msg + "</p>")
  }
  def main(): Unit = {
    appendPar("Hello World")
 }
}

這是在編譯時靜態生成的所有內容。 但我沒有看到任何方式可以動態設置消息參數（例如從數據庫中讀取）。

Answer 1

我不知道從數據庫中讀取它。 這超出了這個問題的范圍（或者你需要重新解釋這個問題）。 也許是AJAX電話或其他什么？

但是要從例如<input>標簽中讀取它，你會做類似的事情：

def main(): Unit = {
  val msg = jQuery("#myinput").value()
  appendPar(msg)
}

（雖然在這種情況下，它可能在主要方法中沒有任何意義，但這不是重點。）

我的意思是， msg只是一個val （所以就像JS中的var但是不可變）。 您可以根據需要從任何動態信息源中獲取它。

編輯：

如果要在呈現頁面時訪問服務器動態生成的某些數據，可以這樣做：

首先，您的服務器生成的數據作為一個全球性的var在<script>在生成的HTML標簽。 就像是：

<script type="text/javascript">
var mydata = {
  msg: "Some text generated dynamically by the server"
}
</script>

確保在調用Scala.js的main()函數之前發出此腳本標記！

然后，從Scala.js，您可以使用js.Dynamic接口訪問這些數據：

import scala.scalajs.js

val mydata = js.Dynamic.global.mydata
val msg = mydata.msg.asInstanceOf[String]

如果您的數據始終是一個相對靜態的結構，那么為它們聲明一個外觀類型可能會很有用：

@JSName("mydata")
object MyData extends js.Object {
  val msg: String = ???
}

然后您可以訪問它而無需使用Dynamic API：

val msg = MyData.msg

Answer 2

添加到（並試圖歸納） sjrd的回答 ：要調用javaScriptMethod一個物體上JavaScriptType你先寫一個類型門面吧：

import scala.scalajs.js
import scala.scalajs.js.annotation.JSName

@js.native
@JSName("JavaScriptType")
class MyType() extends js.Object {
  def javaScriptMethod(someParam: String) = js.native
}

在那之后，在客戶端使用Scala使用JavaScript代碼是件小事：

val myObject = new MyType()
myObject.javaScriptMethod("Yippie")

---

舉一個具體的例子，要在Scala.js應用程序中使用Stack Overflow的Markdown轉換器Pagedown ，首先要為它創建類型Facade：

@js.native
@JSName("Markdown.Converter")
class MarkdownConverter() extends js.Object {
  def makeHtml(txtUsingMarkdown: String): String = js.native
}

如果你正在使用這個很棒的教程項目學習Scala.js，你可以在Settings.scala聲明對Pagedown的依賴，如下所示：

val jsDependencies = Def.setting(Seq(
  "org.webjars.bower" % "pagedown" % "1.1.0" / "Markdown.Converter.js",
  //...

然后你就可以做到

val html = new MarkdownConverter().makeHtml("this is *nice*")

---

這是我們調用SparkMD5的靜態方法的另一個例子。

我們定義一個object而不是前一個例子的class 。 此外，我們可以省略@JSName注釋，因為我們的Scala類型與JavaScript類型是同名的：

@js.native
object SparkMD5 extends js.Object {
  def hash(str: String, raw: Boolean = false): String = js.native
}