jquery template

:not()

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

 type=”text/x-jquery-tmpl”

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">

<p>${value1},<i>${value2}</i><>

</script>

然后获得里面的字符串:

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

另外我们在实际代码中也不会用一个匿名的对象作为数据,而是会创建一个有名有姓的对象:

var pageData;

pageData.value1 = ‘string 1’;

pageData.value2 = ‘string 2’;

最后就可以使用了:

$.tmpl(pageTmpl,pageData).appendTo(‘#target’);

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:

<table>
  <tr>
    <td>99Designs</td>
    <td>99 Designs Logo</td>
    <td>$450.00</td>
    <td>1</td>
  </tr>
  <tr>
    <td colspan="2">Web development and testing</td>
    <td colspan="2">$25,000.00</td>
  </tr>
  <tr>
    <td>LinodeMonthly</td>
    <td>Monthly hosting at Linode</td>
    <td>$40.00</td>
    <td>12</td>
  </tr>
</table>

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.

 

Advertisements

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

生活在西班牙

自己动手丰衣足食

BlueAsteroid

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

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

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: