jsrender怎样渲染文本框

JavaScript024

jsrender怎样渲染文本框,第1张

在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)

vue.js渲染时间磋该怎么处理

使用Jquery结合AngulraJs使用的时候,在render完table后,执行一段js脚本,把JqTable应用到该table上,能够捕获到AngularJs渲染完成页面的事件。

要达到这个目的,需要为当前的app自定义directive:

app.directive('onFinishRenderFilters', function ($timeout) {

return {

restrict: 'A',

link: function(scope, element, attr) {

if (scope.$last === true) {

$timeout(function() {

scope.$emit('ngRepeatFinished')

})

}

}

}

})

然后,在需要监控的地方,加上该directive:

<tr ng-repeat="user in users" on-finish-render-filters>

<td>{{user.Id}}</td>

<td>{{user.Name}}</td>

<td>{{user.Salary}}</td>

</tr>

最后,补充上需要render完成之后的Js脚本:

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {

//下面是在table render完成后执行的js

var table = $("#leaderBoard").dataTable({

bJQueryUI: true,

"sScrollX": '100%',

})

})

render就是渲染的意思。

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

举个最简单的例子:

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

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