文档章节

XTemplate介绍

s
 seefan
发布于 2015/11/16 21:44
字数 1761
阅读 37
收藏 0

XTemplate的运行主体,对外使用的变量有$scope,当使用bindData时,变量会按绑定名字注入这个变量。

目前支持两种形式的绑定,单变量绑定和数组。

单变量绑定

是以html中data-bind标记为绑定对象,只要data-bind的内容和绑定的变量同名,即会自动赋值。

例如:

<p data-bind='title'></p>

这时如果有一个变量为如下结构{title:'hello world'},那么,这个data-bind为title的p标签就会显示hello world。

最终会生成

<p data-bind='title'>hello world</p>

使用方法参见示例:

1.普通绑定:输出到p的默认内容中,此处为innerHTML属性。一般img将输出到src,input输出到value,其它输出到innerHTML。

<p data-bind="content"></p>

2.原始值按html输出:

<p data-bind="content" data-bind-to="innerHTML"></p>或<p data-bind="content" data-bind-to="innerHTML">{!content}</p>第1种为简写,第2种为data-bind-to的标准写法

3.data-bind-to使用:

<b data-bind="market_product_id" data-bind-to="title" title="{!content}">title</b>data-bind-to指定了输出的属性,所以将绑定的内容将按data-bind-to进行绑定。此处data-bind-to为title,
待绑定的属性内容要使用模板。
所以XTemplate将会把market_product_id的值绑定到title属性上。
此处模板内content前有个叹号“!”,代表输出原始值,不进行html转义。

4.模板输出:必须使用data-bind-to指定属性名,默认的输出属性值不会当作模板。

<p data-bind="content" data-bind-to="innerHTML"><b>{content|default,'没有内容显示'}</b></p>content的内容会以内部html为模板绑定后显示

如果content为空,最终输出<p data-bind="content" data-bind-to="innerHTML"><b>没有内容显示</b></p>如果刚开始不想显示出模板的内容,可以将p设置为隐藏<p style="display:none" data-bind-to="innerHTML" data-bind="content"><b>{content|default,'没有内容显示'}</b></p>或<p class="hide" data-bind-to="innerHTML" data-bind="content"><b>{content|default,'没有内容显示'}</b></p>绑定后style.display将被重置为空,css中的hide也会被移除。

5.img的src绑定:

<img data-bind="thumb"/>最终输出<img data-bind="thumb" src="图片地址"/>指定img的默认显示图片,直接使用原来的src指定默认图<img data-bind="imgsrc" data-bind-src='/{imgsrc}/abc.jpg' src='默认图'/>如果img的地址比较复杂,是组合而成,或是需要用函数,可以使用data-bind-src来指定src的模板。<img data-bind="thumb" data-bind-src="{thumb1|default,'logo.jpg'}"/>注意不要用src属性!!!

不使用data-bind-to指定src,是因为如果指定img的src,将会使浏览器多产生一个无效的http请求,影响加载效果。

错误的例子:<img data-bind="thumb" data-bind-to="src" src='/{imgsrc}/abc.jpg'>/{imgsrc}/abc.jpg这个地址是不存在的地方,所以会引起一个错误的http请求。

数组绑定

数组绑定是指定一个模板,并把数组的内容循环,按模板格式化后返回多行html。

例如:

 <ul data-repeat-name='listdata'>
     <li>{title}</li>
 </ul>

这里定义了一个名为listdata的模板,ul的内部html将成为可循环的模板,即

 <li>{title}</li>

为待循环的内容

我们绑定以下变量[{title:'hello 0'},{title:'hello 1'}]

最终会生成

<ul data-repeat-name='listdata'>
     <li>hello 0</li>
     <li>hello 1</li></ul>

使用方法参见示例:

1.普通输出:

 <ul data-repeat-name='data'>
     <li>{market_product_id}:{product_name}</li>
 </ul>

2.img的src绑定:

 <ul data-repeat-name='data'>
     <li><img data-bind-src='{thumb}'/>{market_product_id}:{!content}</li>
 </ul>

 这里与单变量绑定不同的是没有使用data-bind指定绑定的属性,其它使用方法完全一致。

模板的使用

模板的基本语法是{模板内容},两端以大括号包围,中间为模板的内容。

如:{username},即输出变量username的内容。

模板可以在循环的模板中使用,也可以在待绑定属性中使用,也可以在data-bind-src中使用。

使用方法参见示例:

1.使用内部函数处理输出结果:

{market_product_num|repeat,'*'}//最终输出market_product_num个*,repeat为内部函数语法为:[属性名]|[函数]|[函数]属性名后竖线"|"连接函数名,当前的属性必须为函数的第1个参数。多个函数时依次用竖线连接,前一个函数作为后一个函数的第一个变量输入。如:{user_money|format_money},其中user_money为绑定属性名,format_money为内部函数名,主要作用为格式化货币。如果函数有多个参数,使用逗号连接。

2.使用外部函数处理输出结果:

{market_product_id|#hello,':)'}函数名前加了#号,代表使用外部函数,此处使用了hello,该函数使用前一定要定义。此处market_product_id的值会传给s变量,即第1个变量。示例1:function hello(s){
    return s+' hello';}示例2:function hello(s,v){
    return s+'hello'+v;}

3.使用多个函数处理输出结果:

{market_product_id|repeat,'@@'|#hello,':)'}用|连接即可。

4.使用外部变量:

{id}={#out_abc}变量前加#

5.进行简单的运算:

{market_product_id * 3 + 12}在模板中,属性名支持简单的加减乘除运算,复杂的请使用自定义函数处理。

6.在模板中处理子循环:

{list|range,'ID:(id)&nbsp; '}使用内部函数range,参数为模板内容。但为了区分子模板和主模板,子模板使用小括号“()”代替大括号。

特殊语法:

!号的使用

在模板中使用,例如{!title},输出title的值,以没有!的区别,这里不会把html进行编码,会输出原始的html。

#号的使用

在函数名中使用,如果在函数名前加#,则指定这个函数为全局函数,这时这个函数必须是已经定义好的全局函数或是javascript的内部函数。 在变量名中使用,如果果变量名前加#,则指定这个变量为全局变量,这时这个变量必须是已经定义好的全局变量。

绑定示例

注意:使用load方法,需要jQuery的支持,详细见API中关于函数的介绍第1个参数为为绑定名称,第2个为请求的数据地址,第3个为请求的参数,第4个为数据过滤处理,一般用于把要绑定的数据返回。

json的数据内容为

{"error":0,"data":[
 {"thumb":"../images/product-1.jpg","product_name":"体验品","price":12,"oldprice":100},
 {"thumb":"../images/product-2.jpg","product_name":"体验品","price":13,"oldprice":100},
 {"thumb":"../images/product-3.jpg","product_name":"体验品","price":24,"oldprice":100},
 {"thumb":"../images/product-4.jpg","product_name":"体验品","price":15,"oldprice":100},
 {"thumb":"../images/product-5.jpg","product_name":"体验品","price":65,"oldprice":100},
 {"thumb":"../images/product-6.jpg","product_name":"体验品","price":32,"oldprice":100}]}

模板内容为

<ul data-repeat-name='data0'>
    <li>{product_name} {price} <s>{oldprice}</s> </li></ul>

script为

 XTemplate.ready(function () {
    this.load('data0', 'data.json', {}, function (e) {
        return e.data;
    });});

最终将输出

<ul data-repeat-name='data0'>
     <li>体验品 12 <s>100</s> </li>
     <li>体验品 13 <s>100</s> </li>
     <li>体验品 24 <s>100</s> </li>
     <li>体验品 15 <s>100</s> </li>
     <li>体验品 65 <s>100</s> </li>
     <li>体验品 32 <s>100</s> </li></ul>


© 著作权归作者所有

s
粉丝 0
博文 1
码字总数 1761
作品 2
朝阳
私信 提问
模版引擎XTemplate与代码生成器XCoder(源码)

模版引擎XTemplate是一个仿T4设计的引擎,功能上基本与T4一致(模版语法上完全兼容T4,模版头指令部分兼容)。 自己设计模版引擎,就是为了代码生成器、网站模版、邮件模版等多种场合,也就是...

大石头
2010/12/21
0
0
Ext GWT 3.0 Developer Preview 1

Ext GWT是Ext和GWT整合的一个工具,可以使用GWT编写EXT为前台的程序 下载 Ext GWT 3.0 Developer Preview 1 从 3.0 开始自定义事件处理的写法简化了,如下: 或者 新的 XTemplate 模板功能:...

红薯
2011/06/17
954
1
Ext 如何通过XTemplate显示图片

Model层的图片字段是一个以逗号分隔的字符串,代表多张图片。(http://xxx.cc.1.png,http://xxx.cc.2.png,http://xxx.cc.3.png) 需要在视图层展示图片,使用rowBodyTpl : new Ext.XTemplat...

tony-cyq
2016/06/12
181
1
sencha touch2 list中自定义按钮的问题

请教大侠们,列表中的数据都是从store里面取出来的,右边的“确认”/"已确认"也是从store里面获取的,要在界面上渲染成button。已确认的话按钮还不能点击。 在list里面试了在itemTpl选项里面...

海岩奶绿
2013/02/19
990
0
Sandbox 2.0 发布,个人网站平台

Sandbox 是一个用来搭建个人网站的平台,主要功能包括博客、相册、文件下载、网站风格定制等功能。 该版本做了大量的改进,包括使用 XTemplate 模板引擎进行重写,管理界面大改造,完全兼容 ...

红薯
2010/03/18
2.9K
3

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
2
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
4
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
2
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部