在云中创建一个jQuery应用程序
一切准备就绪后，我们就来创建一个超简单的jQuery应用程序，显示从一个WCF服务(托管到云中的)检索到的记录集。
在WebRole1项目中创建一个新页面，保存为Default.htm，添加下面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Products</title>
<style type="text/css">
#productContainer div {
border:solid 1px black;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<h1>Product Catalog</h1>
<div id="productContainer"></div>
<script id="productTemplate" type="text/html">
<div>
Name: {{= name }} <br />
Price: {{= price }}
</div>
</script>
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
var products = [
{name:"Milk", price:4.55},
{name:"Yogurt", price:2.99},
{name:"Steak", price:23.44}
];
$("#productTemplate").render(products).appendTo("#productContainer");
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Products</title>
<style type="text/css">
#productContainer div {
border:solid 1px black;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<h1>Product Catalog</h1>
<div id="productContainer"></div>
<script id="productTemplate" type="text/html">
<div>
Name: {{= name }} <br />
Price: {{= price }}
</div>
</script>
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
var products = [
{name:"Milk", price:4.55},
{name:"Yogurt", price:2.99},
{name:"Steak", price:23.44}
];
$("#productTemplate").render(products).appendTo("#productContainer");
</script>
</body>
</html>
Product Catalog
这里的jQuery代码简单显示了一个产品清单，我使用了一个jQuery模板格式化每个产品。
按F5测试一下Default.htm页面工作是否正常，这里因为是在本机测试，因此需要用本地数据库模拟云存储，运行后，你将看到如下图所示的页面。
图 11 本机模拟运行效果
如果Default.htm如预期那样工作，你将会看到三个产品。
图 12 运行结果，显示了三个产品的产品清单
