1. 对helloworld.html中id为template 的<script>(下简称“tpjs”)进行修改
<script type="text/x-template" id="template">
<div padding="10">
<label text="请在此输入"/>
<input type="text" name="name"/>
<button type="button" >点击</button>
</div>
</script>
页面显示如下,注意:tpjs里只能存在一个子标签,多个子标签将无法显示,这里用<div>作为子标签。
2. 将div改成Panel
<script type="text/x-template" id="template">
<Panel padding="10">
<label text="请在此输入"/>
<input type="text" name="name"/>
<button type="button" >点击</button>
</Panel>
</script>
网页的样式出现了变化,Panel是flyingon的模板关键字,表示模具,对模板进行铸模的工具。
在Panel添加layout="vertical-line" 属性,<Panel layout="vertical-line" padding="10">,该标签下的子标签采用垂直线性布局。
3. 修改tpjs和fyjs(flyingon所在的<script>代码块)代码,注意tpjs中的冒号“:”
<script type="text/x-template" id="template">
<Panel :layout="lay" :padding="pad">
<label :text="txt1"/>
<input type="text" name="name"/>
<button type="button" :text="txt2"></button>
</Panel>
</script>
<script type="text/javascript">
flyingon.view({
host: 'container',
template: '#template',
defaults: {
lay: 'vertical-line',
pad:'10',
txt1:'请在此输入',
txt2:'点击'
}
});
</script>
4.将文件另存为template.html