scala - 如何将片段函数绑定(bind)到按钮或图像的 onclick 事件？

Question

我已经定义了这个函数来建立一个学生列表，每个学生都有他的名字、姓氏和一个图像，这取决于一个属性可以是一个勾号或一个叉号。我想将 onClick 事件分配给标签 Academic(my image) 以调用我的代码片段中的一个名为 Academic(Student s) 的函数，该函数接收学生，然后重定向到另一个页面。谁能帮我？？

def students(xhtml: NodeSeq) = {

    def bindStudents(template: NodeSeq): NodeSeq = {

      studentsList.flatMap {
        s => bind("studentTag", template, "name" -> s.Name, "surname" -> s.Surname,
          AttrBindParam("academic", if (s.HasIssue("Academic")) tickUrl else crossUrl, "src"),         
        )}
    }
    bind("list", xhtml, "studentsList" -> bindStudents _)
  }


 def academic(s:Student)={
    //do some stuff with s
    redirectTo("/OtherPage.html")
  }

代码

<list:studentsList>
            <tr>
                <td> <studentTag:name /> </td>
                <td> <studentTag:surname /> </td>
                <td>
                     <img  studentTag:academic=""/>
                </td>
</list:studentsList>

Answer 1

SHtml 中有一个方法叫做 ' onEvent '。

我不太确定如何以旧方式执行此操作，但如果您使用新的 designer-friendly CSS binding helpers ，这将非常简单:

HTML 模板:

<div data-lift="MySnippet">
    Name:<span id="name">Student Name</span>
    SurName:<div class="surname">Surname</span>
    <img src="imageURL" class="clickable"/>
</div>

这是片段:

class MySnippet
{
    val studentName = "whatever"
    val surName = "..."

    def onClickCallback(s: String): JsCmd = {
        // Do what ever you want, BTW, I never have idea
        // what the ``s`` the lift will passed in.

        Alert('Hey, you clicked me.') // This is the javascript that browser will execute when user click on the element.
    }

    // Note there is no argument list
    def render = {
        "#name" #> studentName & // Replace the HTML tag with id="name" to studentName 
        ".surname" #> surName & // Replace the HTML tag with class=surname to surName 
        ".clickable [onClick]" #> SHtml.onEvent(onClickCallback) // Append onClick attribute to HTML tag that has "clickable" class, and it will calle onClickCallable in your snippet.
    }
}

更新

抱歉，我没有注意到您绑定(bind)到列表。但既然有柯里化(Currying)功能，也不会太难。

HTML 代码:

<table data-lift="MySnippet">
  <tr>
    <td><span class="name">Name</span></td>
    <td><span class="surname">SurName</span></td>
    <td><img src="test.jpg"/> </td>
  </tr>
</talbe>

case class Student(name: String, surname: String)

class MySnippet
{
    def onClickCallback(student: Student)(s: String): JsCmd = {
        Alert("You Click:" + student)
    }

    val xs = Student("Brian", "Hsu") :: Student("David", "Walter") :: Nil

    def render = {
        "tr" #> xs.map { student => 
            ".name" #> student.name &
            ".surname" #> student.surname &
            ".clickable [onClick]" #> SHtml.onEvent(onClickCallback(student)_) 
        }
    }
}