更新

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 CODE

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

更新

抱歉，我没有注意到您绑定到列表。但由于有功能，所以也不会太困难。

HTML code：

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

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

1 个答案:

更新