jQuery Template 簡單使用

插件 github 位址 https://github.com/KanbanSolutions/jquery-tmpl

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code> <code>lang</code><code>=</code><code>"en"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"UTF-8"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../../js/jquery-1.11.2.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../../js/jquery.tmpl.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>        </code><code>$(function(){</code>

<code>            </code><code>var data = {username:"xiao",foods:[{name:"apple"},{name:"bear"}]};</code>

<code>            </code><code>$("script[name=template]").tmpl(data).appendTo("div[name=content]");</code>

<code>        </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>name</code><code>=</code><code>"template"</code> <code>type</code><code>=</code><code>"text/x-jquery-tmpl"</code><code>&gt;</code>

<code>        </code><code>username:{%= username%}&lt;</code><code>br</code><code>/&gt;</code>

<code>        </code><code>{%if foods.length == 0 %}</code>

<code>            </code><code>There is no foods.</code>

<code>        </code><code>{%else%}</code>

<code>            </code><code>There are {%= foods.length%} kinds of foods.&lt;</code><code>br</code><code>/&gt;</code>

<code>            </code><code>favourite foods are below.&lt;</code><code>br</code><code>/&gt;</code>

<code>            </code><code>{%each(i,food) foods%}</code>

<code>                </code><code>&lt;</code><code>div</code><code>&gt;{%= food.name%}&lt;/</code><code>div</code><code>&gt;</code>

<code>            </code><code>{%/each%}</code>

<code>        </code><code>{%/if%}</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>name</code><code>=</code><code>"content"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

Note : 最好将模闆資訊放在script标簽裡邊，不然{%if%}表達式如果有&gt;或&lt;可能會有問題。

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1639903