render在javascript中的意思

JavaScript046

render在javascript中的意思,第1张

render就是渲染的意思。

而渲染，就是这样一个过程，浏览器根据页面的html代码、css定义、javascript脚本的操作，在浏览器上按照一定的规范(传说中的 DOCTYPE )显示出相应的内容。

举个最简单的例子：

<b>这个是粗体显示</b>

浏览器根据上面的代码在浏览器上面显示出粗体的文字，这个过程就叫渲染。

在JsRender中，是通过调用方法render()来渲染模板的。

JsRender中，有三种方式调用render()方法来渲染模板。

1） 如果已经存在一个template的对象，则可以使用template.render(...)

[html] view plain copy print?

<table><tbody id="person"></tbody></table>

<script id="personTmpl" type="text/x-jsrender">

<tr>

<td>

{{:name}}

</td>

</tr>

</script>

[javascript] view plain copy print?

var myTmpl = $.templates("#personTmpl")

var person = {

name: "Adriana"

}

var html = myTmpl.render(person)

$("#person").html(html)

2) 如果已经有一个通过名字注册的template，名字为("myTmpl"),则可以使用$.render.myTmpl(...)调用。

[html] view plain copy print?

<table><tbody id="person"></tbody></table>

<script id="personTemplate" type="text/x-jsrender">

<tr>

<td>

{{:name}}

</td>

</tr>

</script>

[javascript] view plain copy print?

$.templates("personTmpl", "#personTemplate")

var person = {

name: "Adriana"

}

var html = $.render.personTmpl(person)

$("#person").html(html)

3）如果该template是在一个script脚本块中定义的，并且该脚本块使用selector“#myTmpl"，则同样可以使用$("#myTmpl").render(...)调用。

[html] view plain copy print?

<table><tbody id="person"></tbody></table>

<script id="personTemplate" type="text/x-jsrender">

<tr>

<td>

{{:name}}

</td>

</tr>

</script>

[javascript] view plain copy print?

var person = {

name: "Adriana"

}

var html = $("#personTemplate").render(person)

$("#person").html(html)

什么是jsrender

一个JavaScript库，允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库，它具有无代码标记语法和高性能，不依赖于jQuery，也不依赖于文档对象模型（DOM），支持创建自定义函数并使用纯粹的基于字符串的渲染。既然是JavaScript那就可以直接用JavaScript的方法：

例如

<div id="myimage"></div>

<input type="button" value="插入图片" id="btninsertpic" onclick="insertpic()" />

<script type="text/javascript">

function insertpic(){

path="表.png"//请修改为本地图片的路径

document.getElementById('myimage').innerHTML='<img src="'+path+'" />'

}

</script>