jquery template


Selects all elements that do not match the given selector.

All selectors are accepted inside :not(), for example: :not(div a) and :not(div,a).


js端的模板,主要用于拼装html字符,因为直接操作dom效率很低。直接用字符串平html代码很难维护,于是就出来这种模式  模板+json(或其他数据) = html字符串。常用的应用场景就是 ajax从后台取到json数据,然后用模板渲染成html,然后更新

In a sense jQuery Templates consists of three plugins: .tmpl(), .tmplItem() and .template(), and each one comes in two flavors: instance plugin and static plugin. From a basic scenario point of view, it is like this:

  • .tmpl()Render the template
  • .tmplItem()Find the template item
  • .template()Compile/Store the template $.template()方法,将一段Html编译为模板

The template itself is any HTML markup, along with any of a set of template tags which enable some very rich scenarios for creating data-driven UI. The current set of tags that are supported in jQuery templates are:

  • ${…}Evaluate fields or expression
  • {{each …}}…{{/each}}Iterate without creating template items
  • {{if …}}…{{else …}}…{{/if}}Conditional sections
  • {{html …}}Insert markup from data
  • {{tmpl …}}Composition, as template items
  • {{wrap …}}…{{/wrap}}Composition, plus incorporation of wrapped HTML
$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );
  • 第一个参数是html模板,里面可以包含html标签,变量(比如${Name}),逻辑(比如)等;
  • 第二个可选参数是数据,可以是JavaScript对象或者数组(其实JavaScript数组就是对象,而不像大多数语言那样,是一种更快的原生数据)。
<script id="pageTmpl" type="text/x-jquery-tmpl">




var pageTmpl = $('#pageTmpl').html();


var pageData;

pageData.value1 = ‘string 1’;

pageData.value2 = ‘string 2’;



Composition with jQuery Templates: Why and How

An example scenario: The invoice

Imagine that you need to display an invoice for a company that resells taxable items and also sells services. Ideally, the invoice line items for those separate “types” should be displayed with different markup. To explore a simple example of that, let’s create a template to render the invoice for a fictional web development company.

Whether retrieved from a server-side endpoint or embedded in the page during initial rendering, the underlying data for that invoice might be structured something like this:

var invoice = {
  invoiceItems: [
    { type: 'item', 
      part: '99Designs', description: '99 Designs Logo', 
      price: 450.00, qty: 1 },
    { type: 'service',
      service: 'Web development and testing', 
      price: 25000.00 },
    { type: 'item',
      part: 'LinodeMonthly', description: 'Monthly site hosting', 
      price: 40.00, qty: 12 }

Following from that data structure, our goal for the invoice’s markup might look something like this:

    <td>99 Designs Logo</td>
    <td colspan="2">Web development and testing</td>
    <td colspan="2">$25,000.00</td>
    <td>Monthly hosting at Linode</td>

Notice that the markup for service and item rows is structurally different, to better represent the underlying data. When that’s desirable, composing sub-templates is the way to go. As we’ll see next, the alternative is unappealing.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......







Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision


Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness



Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

%d bloggers like this: