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

发布时间：2020-12-16 10:03:30 所属栏目：安全来源：网络整理

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

我已经定义了这个函数来构建一个学生列表,每个学生都有他的名字,姓氏和图像,这取决于一个属性可以是刻度线还是十字形.我想将标签学术(我的图像)分配给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>

解决方法

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代码：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!