视图层的引用和模板使用

简介: 引用: axml提供两种文件引用方式import和include。    (1)import import可以加载已经定义好的template。             比如,在item.axml中定义了一个叫item的template。

引用: axml提供两种文件引用方式import和include。 

   (1)import import可以加载已经定义好的template。 
            比如,在item.axml中定义了一个叫item的template。 


  
{{text}}
 

          
           然后,在index.axml中引用item.axml,就可以使用item模板。 

 

           import有作用域的概念,即只会import目标文件中定义的template。 
           比如:C import B,B import  A,在C中可以使用B定义的template,在B中可以使用A定义的template, 
           但是C不能使用A定义的template。

  


  
 A template 

  
 B template 

  

  

 

 


   (2)include include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置如: 

 

  
 body 

  
 header 

  
 footer 


模板: axml提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。 
   (1)定义模板 使用name属性,作为模板的名字。然后在内定义代码片段。 


  
 {{index}}: {{msg}}  Time: {{time}} 
 

  (2)使用模板 使用is属性,声明需要的使用的模板,然后将模板所需要的data传入, 
    如: 

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})
 

   is属性可以使用Mustache语法,来动态决定具体需要渲染哪个模板。 

 odd  even 
 

注意:模板拥有自己的作用域,只能使用data传入的数据,但可以通过 onXX 绑定页面的逻辑处理函数 
推荐:使用 template 方式来引入模版片段,因为 template 会指定自己的作用域,只能使用data传入的数据,因此小程序会对此优化, 如果改 template 的 data 没有改变,该段 UI 并不会重新渲染。 

有什么问题请您在下面咨询,大家一起讨论交流。

目录
相关文章
|
API 图形学
Winform控件优化之自定义控件的本质【从圆角控件看自定义的本质,Region区域无法反锯齿的问题】
自定义控件的本质只有两点:重绘控件Region区域(圆角、多边形、图片等),这是整个控件的真实范围;重绘图形,在原有Region范围内,重绘不同的图形(圆角、多边形、图片等)作为背景......
450 0
Winform控件优化之自定义控件的本质【从圆角控件看自定义的本质,Region区域无法反锯齿的问题】
|
5月前
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
|
6月前
|
小程序 JavaScript
小程序实现竖行布局视图(类表格)
小程序实现竖行布局视图(类表格)
41 0
|
10月前
|
UED 开发者
构建可访问的自定义表单控件
在现代Web应用程序中,表单是一个至关重要的组件。用户可以通过表单输入数据并与应用程序进行交互。为了提高用户体验,并让所有用户都能轻松地使用您的应用程序,构建可访问的自定义表单控件是非常重要的。
|
10月前
ArcGIS:如何新建图层组并添加数据、切换数据视图和布局视图、修改符号系统?
ArcGIS:如何新建图层组并添加数据、切换数据视图和布局视图、修改符号系统?
143 0
ArcGIS:如何新建图层组并添加数据、切换数据视图和布局视图、修改符号系统?
|
JavaScript
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
536 0
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
|
移动开发 JavaScript weex
uniapp原生子窗体subNvue的使用超容易理解的总结,解决覆盖不了视频或者地图等层级问题
uniapp原生子窗体subNvue的使用超容易理解的总结,解决覆盖不了视频或者地图等层级问题
2189 0
uniapp原生子窗体subNvue的使用超容易理解的总结,解决覆盖不了视频或者地图等层级问题
文字处理技术:视图坐标都是在父视图的相对坐标
文字处理技术:视图坐标都是在父视图的相对坐标
68 0
|
SQL
【实现】表单控件里的子控件的变化。
     前情回顾: 【实现】表单控件的UI布局,实现方式         上一篇说的是表单布局上的变化,也就是通过TR、TD的设置,实现了多行多列的效果。那么格子画好了,我们 可以往里面放控件了。
858 0
|
Web App开发
艾伟:WinForm控件开发总结(七)-----为复杂属性的子属性提供编辑功能
前面的几篇文章中,我们给控件添加一个复杂的类型Scope,并且给它的类型提供的一个类型转换器,现在我们可以在属性浏览器中编辑它的值,并且它的值也被串行化的源代码里了。但是你有没有发现,在属性浏览器里编辑这个属性的值还是不太方便。
668 0