`
Josh_Persistence
  • 浏览: 1651440 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类

JQuery模板 :(八) JsRender中的转换器之常用的3个内置转换器

阅读更多

第一个常用内置转换器: $.views.converters.html()

 

$.views.converters.html()是内置的HTML编码器,像这样使用:

var myHtmlEncodedString = $.views.converters.html(myString);

除了这种方式外,也可以使用如下的两种方式来声明一个converter

{{html:myExpression}}

{{>myExpression}}

实际上{{>...}}和{{html...}}的功能是完全一样的,只是提供了一种更为简单的方式来编码HTML。

 

实例:

<!DOCTYPE html>


<html>
<head>
    <link href="../css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<button id="show">Show result</button>



<script>
var value = "< > ' \" &";
var result = $.views.converters.html(value);

$("#show").on("click", function() {
  alert(result);
});
</script>

</body>
</html>

 

HTML的encode规则:

& → &amp;
< → &lt;
> → &gt;
\x00 → &#0;
' → &#39;
" → &#34;
` → &#96;

 

============================================================================

第二个常用的内置转换器:$.views.converters.attr()

如果需要对属性进行encode的时候,就可以使用该转换器。像这样使用:

var myAttributeEncodedString = $.views.converters.attr(myString);

除此之外,还可以这样使用:

{{attr:myExpression}}

实例:

<!DOCTYPE html>


<html>
<head>
    <link href="../css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<button id="show">Show result</button>



<script>
var value = "< > ' \" &";
var result = $.views.converters.attr(value);

$("#show").on("click", function() {
  alert(result);
});
</script>

</body>
</html>

 1. 实际上{attr: ...}} and {{html: ...}}具有相同的功能。

2.  这样使得当HTML需要encode时,可以对attribute进行encode,从而可以避免未信任数据的危险注入。

3. 使用下面的schema进行encode:

& → &amp;
< → &lt;
> → &gt;
\x00 → &#0;
' → &#39;
" → &#34;
` → &#96;

 

============================================================================

第三个有用的内置转换器:$.views.converters.url()

该转换器主要用于对url进行encode,可以这样使用:

var myUrlEncodedString = $.views.converters.url(myString)

除此之外,也可以使用这样的方式来声明该转换器:

{{url:myExpression}}
<!DOCTYPE html>


<html>
<head>
    <link href="../css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<button id="show">Show result</button>


<script>
var value = "<_>_\"_ ";
var result = $.views.converters.url(value);

$("#show").on("click", function() {
  alert(result);
});
</script>

</body>
</html>

 

 

 

0
0
分享到:
评论

相关推荐

    JsRender.zip(jsrender.js和jsrender.min.js合集)

    6. **递归模板**:JsRender 支持递归模板,这意味着可以在模板中嵌套使用同一个模板,这对于处理层次结构的数据非常有用。 7. **双向数据绑定**:尽管JsRender 主要是为单向数据绑定设计的,但它可以通过配合...

    jquery-jsrender.js 下载

    总结来说,`jQuery JSRender.js`是一个强大的工具,它简化了数据驱动的Web开发,提供了灵活的模板系统,易于学习和使用。通过理解和熟练掌握其核心概念,开发者可以创建出响应迅速、维护友好的Web应用。结合`...

    jquery.qrcode.js生成带logo的二维码

    在本文中,我们将探讨如何使用`jquery.qrcode.js`插件来生成带有Logo的二维码,并将其转换为图片格式。此方法非常适合需要在网页上动态生成二维码的应用场景。 #### 一、jquery.qrcode.js简介 `jquery.qrcode.js`...

    js框架,类似jquery

    在jQuery中,发送一个AJAX请求变得异常简单: ```javascript $.ajax({ url: "myURL", type: "POST", data: { key: "value" }, success: function(response) { // 处理成功响应 }, error: function(xhr, ...

    Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo

    使用jQuery选择器指定渲染目标,并调用`qrcode`方法来生成二维码: ```javascript $("#qrCodeDiv").qrcode({ render: "canvas", // 或 "table" width: 260, height: 260, text: "www.baidu.com", typeNumber: ...

    jQuery日历插件CLNDR.zip

    5. **与其他库的集成**:由于jQuery的广泛使用,CLNDR可以轻松地与其他jQuery插件(如Bootstrap、FullCalendar等)集成,实现更丰富的功能,如日期选择器、时间戳转换等。 6. **响应式设计**:CLNDR考虑到了移动...

    使用jquery.qrcode.js生成二维码插件

    因为jquery.qrcode.js是基于jQuery库的,因此在引入jquery.qrcode.js之前,必须确保页面中已经加载了jQuery。 2. 插件参数设置:在调用jquery.qrcode.js生成二维码时,可以通过设置一系列的参数来定制二维码的具体...

    jQuery实现二维码扫描功能

    通过引入这个插件,并且利用jQuery选择器和事件处理机制,我们可以轻松地在网页上实现一个按钮,当用户点击这个按钮时,页面会动态生成一个指定内容的二维码。 具体的实现步骤如下: 1. 引入jquery.qrcode.min.js...

    spreadjs_自定义单元格实现层级树-demo.zip

    在"spreadjs_自定义单元格实现层级树-demo.zip"这个压缩包中,我们看到了一个演示如何使用SpreadJS创建具有层级树结构的自定义单元格的实例。接下来,我们将深入探讨这一主题,了解其背后的技术细节和实现步骤。 ...

    js高级面试题

    Vue 使用了一个编译器来解析模板语法,将它们转换为 JavaScript 函数,然后在数据变化时执行这些函数来更新视图。 ### 介绍 Vue 的实现流程 1. 初始化 Vue 实例,创建响应式数据。 2. 编译模板,将模板字符串转换...

    Django与JS交互的示例代码

    在`views.py`中,将数据转换为JSON格式并传递给模板: ```python from django.shortcuts import render import json def home(request): data = {'site': '自强学堂', 'author': '涂伟忠'} return render...

    pdf.js使用文件流预览pdf

    PDF.js是Mozilla开发的一个开源库,它允许在Web浏览器中渲染PDF文档,无需依赖任何插件。这个项目的目标是提供一个跨平台、高质量的PDF查看体验。在这个maven项目工程小Demo中,我们将会探讨如何利用PDF.js实现文件...

    echarts 图形统计表js

    ECharts 是一个由百度开发的开源 JavaScript 数据可视化库,它提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等,以及强大的交互功能和自定义选项,广泛应用于Web应用中的数据展示。这个“echarts 图形统计...

    JSF中ie9时间兼容组件替换实现

    jQuery UI Datepicker是一个广泛使用的日期选择器插件,它在各种浏览器上都能运行良好,包括IE9。要将这个组件集成到JSF项目中,首先我们需要在项目中引入jQuery和jQuery UI的库。这可以通过在HTML头部添加CDN链接...

    使用jquery组件qrcode生成二维码及应用指南

    3. **生成二维码**:使用jQuery选择器和`.qrcode()`方法在指定元素中生成二维码。例如,生成包含指定URL的二维码。 ```javascript $('#qrcode').qrcode("//www.jb51.net"); ``` **详细参数** - `render`:渲染...

    使用jquery插件qrcode生成二维码

    3. **调用插件**:接下来,通过jQuery选择器选取这个div,并调用qrcode方法生成二维码。基本调用方式如下: ```javascript $('#code').qrcode("//www.jb51.net"); ``` 这将生成包含指定URL的二维码。 **自定义...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part1

    6.8 自定义类型转换器实现高效率序列化 231 6.9 页面状态性能优化策略 238 6.9.1 存储位置优化——把视图状态信息保存在服务端而非客户端 238 6.9.2 体积优化——压缩视图状态数据 240 6.9.3 分块存储视图状态...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2

    6.8 自定义类型转换器实现高效率序列化 231 6.9 页面状态性能优化策略 238 6.9.1 存储位置优化——把视图状态信息保存在服务端而非客户端 238 6.9.2 体积优化——压缩视图状态数据 240 6.9.3 分块存储视图状态...

    jsgraph,纯javascript脚本画图,实现web拓扑图

    3. **初始化图**:在JavaScript中创建一个jsgraph实例,例如`var graph = new JSGraph(document.getElementById('graph-container'));`。 4. **添加节点和边**:使用`addNode()`和`addLink()`方法添加图形元素,...

Global site tag (gtag.js) - Google Analytics