如何将片段功能绑定到按钮或图像上的onclick事件？

Question

我已经定义了这个函数来构建一个学生列表,每个学生都有他的名字,姓氏和图像,这取决于一个属性可以是刻度线还是十字形.我想将标签学术(我的图像)分配给onClick事件,以便在我的片段中调用一个名为学术(学生)的函数来接收学生,然后重定向到另一个页面.谁能帮我？？

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")
  }

HTML代码

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

Answer 1

SHtml中有一个名为' onEvent '的方法.

我不太确定如何以旧的方式做到这一点,但如果你使用新的设计师友好的CSS绑定助手,它将非常简单:

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.
    }
}

更新

对不起,我没注意到你绑定到列表.但由于有功能,所以也不会太困难.

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)_) 
        }
    }
}