jQuery模板 ：(五) JSRender之编译，注册，获取模板

一、在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);