jQuery模板 :(五) JSRender之编译,注册,获取模板

我一直往前走着 2013-07-28

一、在jsRender中,如果想要创建一个模板,那么需要提供一个template的标记(markup),JsRender会将该标记转换或者编译成一个javascript的函数,即"render"方法。实际上,为了方便我们开发者,JsRender会为我们创建一个template对象,该对象具有一个template.render()方法。

二、有两种方式创建template。

1. 传入一个标记字符串到方法$.templates()中,该方法会将该标记字符串编译成一个template对象,并且选择性地按照该标记字符串名称注册成一个template。

2. 在一个script块中定义一个template,type为type="text/x-jsrender"。在种情况下,JsRender会自动的调用$.templates()方法。

三、相关的实例:

1. 1 根据一个标记字符串名称来创建和注册一个template(从server端获取包含有template标记的script 文件)

<div id="peopleList"></div>
$.getScript("http://www.jsviews.com/samples/resources/templates/person.js", function() {
    var html = $.render.person(people);
    $("#peopleList").html(html);
  });

var people = [
  {
    name: "Adriana"
  },
  {
    name: "Robert"
  }
];

1. 2 根据一个标记字符串名称来创建和注册一个template(从server端获取包含有template标记的text文件)

<div id="peopleList"></div>
var personTemplate;

$.get("templates/person.txt", function(value) {
  personTemplate = $.templates(value);
  var html = personTemplate.render(people);
  $("#peopleList").html(html);
});

var people = [
  {
    name: "Adriana"
  },
  {
    name: "Robert"
  }
];

2.  在一个script块中去注册和定义一个template

<div id="peopleList"></div>

<script id="personTemplate" type="text/x-jsrender">
  <label>Name:</label> {{:name}}
</script>
$.templates("personTmpl", "#personTemplate");

var people = [
  {
    name: "Adriana"
  },
  {
    name: "Robert"
  }
];

var html = $.render.personTmpl(people);

$("#peopleList").html(html);

相关推荐