Binding.scala使用教程14--自定义全局路由

最新推荐文章于 2025-01-14 18:57:01 发布

原创最新推荐文章于 2025-01-14 18:57:01 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#binding.scala #路由

本文介绍了一个使用Scala编写的Web应用程序结构，包括主页、消息页和好友页的实现，通过动态路由和视图组件展示页面内容。文章详细解释了如何使用ThoughtWorks Binding库进行DOM操作和状态管理，以及如何通过事件处理函数切换页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

Home

package app

import com.thoughtworks.binding.dom

object Home
{
  @dom def render =
  {
    <p>i am the HomePage</p>
  }
}

Message

package app

import com.thoughtworks.binding.dom

object Message
{
  @dom def render =
  {
    <p>i am the MessagePage</p>
  }
}

Friend

package app

import com.thoughtworks.binding.dom

object Friend
{
  @dom def render =
  {
    <p>i am the FriendPage</p>
  }
}

Route

缺省值要写成这样不然会导致返回类型不一致

case _ => <div></div>

package app

import com.thoughtworks.binding.Binding.{SingleMountPoint, Var}
import com.thoughtworks.binding.dom

object Route
{
  val path = Var("/home")
  @dom def render =
  {
    <div>
      {
        path.bind match
        {
          case "/home" => Home.render.bind
          case "/message" => Message.render.bind
          case "/friend" => Friend.render.bind
          case _ => <div></div>
        }
      }
    </div>
  }
}

View

package app

import com.thoughtworks.binding.Binding.{ Vars}
import com.thoughtworks.binding.dom

import org.scalajs.dom.raw.{Event}


object View
{
  private val activeCode = Vars.empty[String]

  private val array=Array.fill(3)("green item")

  activeCode.value++=array

  private def handleClick(index: Int,path:String) =
  {
    for (i <- 0 until activeCode.value.length)
    {
        if(index==i)
          activeCode.value(i)="active green item"
        else
          activeCode.value(i)="green item"
    }
    Route.path.value=path
  }

  @dom def render =
  {

    <div>
      <div class="ui pointing menu">
        <a class={activeCode.bind(0)} onclick={e: Event => handleClick(0,"/home")}>
        Home
        </a>
        <a class={activeCode.bind(1)} onclick={e: Event => handleClick(1,"/message")}>
        Message
        </a>
        <a class={activeCode.bind(2)} onclick={e: Event => handleClick(2,"/friend")}>
        Friend
        </a>
        <div class="right menu">
          <div class="item">
            <div class="ui transparent icon input">
              <input type="text" placeholder="Search..."/>
              <i class="search link icon"></i>
            </div>
          </div>
        </div>
    </div>
        <div class="ui segment">
        {Route.render.bind}
        </div>
    </div>
  }
}

MainApp

package app

import com.thoughtworks.binding.dom
import org.scalajs.dom.document

import scala.scalajs.js.JSApp

object MainApp extends JSApp
{
  def main(): Unit =
  {
    dom.render(document.body, View.render)
  }
}

防止IDEA 报错

import com.thoughtworks.binding.Binding

package object app
{
  implicit def makeIntellijHappy[T<:org.scalajs.dom.raw.Node](x: scala.xml.Node): Binding[T] =
    throw new AssertionError("This should never execute.")
}