由原生js实现删除操作的流程是:
1、在template模板的删除标签中,添加一个自定义属性,属性的值和数据的id绑定。
2、在点击时,根据BOM操作的鼠标事件,通过etarget获取到当前元素,然后再读取其绑定的自定义属性值。
3、由自定义属性值锁定到当前DOM标签的索引号。
4、根据索引号删除被选中的标签。
使用npm安装jsdoc后,其文件目录结构如下:
参考: taffydb
而static文件夹放置静态文件,它会被原封不动地复制到生成的文件夹中,tmpl是模板文件
taffyData是包含所有doclet的taffyData,doclet是@link,@name...
比如使用了@name,就可以使用docs[0].name获取第一个@name值
和模板相关的模块是:
生成template的语句是
再看template.js导出类的构造函数
layout的初始化语句:
所以,如果要自定义模板(假设为 selfTheme ,以下都以其为例)的配置项,只需要使用 env.conf.templates 获取即可。例如:
template.js导出类的方法如下:
因此,在 layout.tmpl 文件中,有 content 变量表示当前页内容
当然,同时具有data包含的其它属性变量
在publish.js中,直接使用render函数的有两处。
所以,要修改各页面的标题,只需要将调用这两个函数的title函数换掉,比如:
不过重点还是添加模板变量和方法
添加到view中的方法/属性:
docs是一个包含数据的Taffy对象,它的来源是:
// myClasses等就是传入模板文件的docs变量
在模板中则用this.find({kind: 'class'})代替(view.find)
docs的元素内容是:
特别的:
小程序在使用时,经常会在不同的页面用到相同的页面结构,这个时候我们如果一个个写的话没有必要,这个时候可以使用模板(template)或者组件(component)。
二者区别 在于:
1、需要定义模板:一个template.wxml文件中能写多个模板,用name区分,
下面定义两个模板
2、使用这两个模板,在对应的wxml文件引入:
3、上面在模板content里定义了点击事件subtractNum方法,因为template中没有js文件,因此template中的点击事件,在使用页面中的js里定义。
建议将有子列表操作交互的写成component。
示例:
对应组件的wxml跟page里的wxml一样:
2、使用自定义组件前,首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径
这样,在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
下一节将进入如何 组件向父级传值(组件通信)