首先引入兩個文件:
- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
- <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>
然後js代碼如下:
- <script language="javascript" type="text/javascript">
- function printMessage(s) {
- if (s=="CA") return "The author is from California";
- else return "The author is not from California";
- }
- </script>
- <script id="authorsTemplate" type="text/html">
- <div id="${au_id}" class="author">
- ${au_lname} ${au_fname}
- <div class="address">${address}, ${city}</div>
- <div class="contractType">
- {{if contract}}
- <font color="green">Has contract with the publishing house</font>
- `else`
- <font color="red">Without contract</font>
- {{/if}}
- <br />
- <em> ${printMessage(state)} </em>
- <br />
- </div>
- </div>
- </script>
- <script language="javascript" type="text/javascript">
- $(function () {
- $.getJSON("GetAuthors", "", function (data) {
- $("#authorsTemplate").tmpl(data).appendTo("#authorsList");
- });
- });
- </script>
body部分的代碼如下
- <body>
- <div id="title">Pubs Authors</div>
- <div id="authorsList"></div>
- </body>