버튼이나 이미지에서 snippet 함수를 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

은 'onEvent'라는 SHTML의 방법이있다.

는 예전의 방법으로이 작업을 수행하는 방법을 아주 잘 모르겠지만, 새로운 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. 
    } 
} 

업데이트, 나는 당신이 BINDI 것을 알아 차리지 않았다 목록에. 하지만 카레 기능이 있기 때문에 그렇게 어렵지는 않을 것입니다.

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