教程：模板（Templates）起步

Summary:摘要 本教程将简述模板的功能，和怎样格式化一些基本数据 Author: Shea Frederick

Translater: Frank Cheung

Published: April 18, 2007

 

第一步 您的HTML模板

第一个步骤没有任何特别，这里的HTML可以说是用来格式化你的数据。花括号里面的关键字就是你数据中的{id},{url} 和{text}的容器（placeholder） 。或者用纯数字{0},{1},{2}来表示,但是关键字的命名方式会使你的代码更可读。

现在我们加载html模板，创建一个模板对象（第五行），然后进行编译（第六行）。尽管编译模板不是必须的，但是一般情况下总能改善性能的。

  var html = '<a id="{id}" href="{url}" class="nav">{text}</a><br />';  var tpl =              new Ext.Template(html);  tpl.compile();

第二步，将数据加入到模板中

这里我们将使用append方法加入两行的数据。正如你所见，元素的“id”、“url”和“text”相对应于上述模板的容器。

  tpl.append('blog-roll', {      id: 'link1',       url: 'http://www.jackslocum.com/',       text: "Jack's Site"  });  tpl.append('blog-roll', {      id: 'link2',       url: 'http://www.extjs.com/',       text: "Jack's New Site"  });

这就是模板的基本知识点，对于你来这说非常简单吧？

下一步

如果你想换换口味，文档区便是一个绝佳的好地方。看看范例Feed Viewer，里面就大量使用了模板。