Xitrum学习笔记08 - JavaScript and JSON

JavaScript

Xitrum包含jQuery,有一些 jsXXX辅助方法

1. 添加JavaScript代码片段到View中

在action中,调用jsAddToView添加JS代码(可以多次调用)

class MyAction extends AppAction {
  def execute() {
    ...
    jsAddToView("alert(‘Hello‘)")
    ...
    jsAddToView("alert(‘Hello again‘)")
    ...
    respondInlineView(<p>My view</p>)
  }
}

在 layout 中,调用jsForView:

import xitrum.Action
import xitrum.view.DocType
trait AppAction extends Action {
  override def layout = DocType.html5(
    <html>
    <head>
      {antiCsrfMeta}
      {xitrumCss}
      {jsDefaults}
    </head>
    <body>
      <div id="flash">{jsFlash}</div>
      {renderedView}
      {jsForView}
    </body>
  </html>
)

2. 没有View的情况下,直接响应返回JavaScript

由JavaScript发出响应,使用jsRespond

jsRespond("$(‘#error‘).html(%s)".format(jsEscape(<p class="error">Could not login.</p>)))

重定向

jsRedirectTo("http://cntt.tv/")
jsRedirectTo[LoginAction]()

JSON

Xitrum包含JSON4S(一个JSON抽象语法分析树)。Scala case对象和JSON字符串的转换示例:

import xitrum.util.SeriDeseri
case class Person(name: String, age: Int, phone: Option[String])
val person1 = Person("Jack", 20, None)
val json = SeriDeseri.toJson(person1)
val person2 = SeriDeseri.fromJson[Person](json)

响应返回JSON:

val scalaData = List(1, 2, 3) // An example
respondJson(scalaData)

Knockout.js插件

在 build.sbt文件中配置  libraryDependencies += "tv.cntt" %% "xitrum-ko" % "1.7",就可以在项目中使用Knockout JS了

参考 https://github.com/xitrum-framework/xitrum-ko

时间: 2024-08-21 14:39:21

Xitrum学习笔记08 - JavaScript and JSON的相关文章

Xitrum学习笔记12 - 范围

一.Request 参数种类 1. 文本参数:名为textParams,类型为 scala.collection.mutable.Map[Sting, Seq[String]] 1)queryParams:URL中 ? 后面的参数,例:http://example.com/blah?x=1&y=2 2)bodyTextParams:在POST请求体里的参数 3)pathParams:嵌入到URL的参数,例:GET("articles/:id/:title") 从1)到3),同名

微信小程序开发:学习笔记[5]——JavaScript脚本

微信小程序开发:学习笔记[5]--JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求. 在大部分开发者看来,ECMAScript和JavaScript表达的是同一种含义,但是严格的说,两者的意义是不同的.ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言, JavaScript 是 ECMAScript 的一种实现.理解 JavaScr

C++ GUI Qt4学习笔记08

C++ GUI Qt4学习笔记08 qtc++signal图形引擎文档 [html] view plaincopy 本章介绍Qt的二维图形引擎,Qt的二维图形引擎是基于QPainter类的.<span style="color:#ff0000;">QPainter既可以绘制几何图形(点.线.矩形等),也可以绘制像素映射.图像和文字.此外QPainter还支持一些高级特性,例如反走样.像素混合.渐变填充和矢量路径等.QPainter也支持线性变换,例如平移.旋转.错切和缩放.

RX学习笔记:JavaScript数组操作

RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.unshift(123); array.unshift("value1","value2"); push() 在数组末尾添加元素 array.push("value"); array.push(123); array.push("value1&

【Spring学习笔记-MVC-4】返回Json数据-方式2

摘要 本文讲解另外一种利用spring MVC返回json数据的方法. 前文回顾 在<[Spring学习笔记-MVC-3]返回Json数据-方式1>中介绍了通过: @ResponseBody声明返回值: 配置<mvc:annotation-driven />: 来返回json数据.效果如下:   ==>, 从上面的效果看,只能返回一个对象,不能返回多个对象,不能做到形如下图的返回结果, 存在局限性(可能可以返回多个,自己不知道如何实现). 下面介绍的方式2,利用spring

CoAP学习笔记——nodeJS node-coap返回JSON数据包

0 前言 本文说明如何使用node-coap返回JSON数据包.CoAP是专门为物联网系统开发的面向网络的应用层协议栈,CoAP建立在UDP协议之上尽可能减少网络开销,又具有HTTP Restful类型的特性.node-coap使用nodejs实现了coap的客户端和服务器端. [测试环境]--ubuntu/Linux [相关博文] [CoAP协议文档--The Constrained Application Protocol (CoAP)] [CoAP协议学习--CoAP基础] [CoAP学习

[原创]java WEB学习笔记08:ServletResponse &amp; HttpServletResponse

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

CSS学习笔记08 浮动

从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法外,还有没有其他方法可以实现这种效果呢,答案是肯定的,那就是下面要介绍的CSS的浮动特性,浮动从字面意思上来看,就是浮起来,动起来,那么是谁浮起来,又是谁动起来呢?往下看,很快就会知道答案了. 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,漂浮在标准流之上.元素浮动后,虽然脱离标准流,但

JavaScript学习笔记4之 ByClass&amp;json

一.通过class获取标签 var out=document.getElementsByClassName(‘out’);IE 6 7 8 不支持 getElementsName 是否有办法既能通过class获取标签又没有兼容问题 ? 首先获取全部的标签, 用for循环遍历到所有类名相同的标签, 遍历的顺序放到数组里, 最后获得一个有相同类名的数组. 两种遍历方法: 一种是全局遍历的方法:只要类名相同的都放进数组 另一种是局部遍历的方法,在局部遍历相同的类. 实例如下: 页面布局: 1 <div