Fish开发与使用

简介: 审批系统使用es5,现在fish组件里面,用了大量的bind(this)方法,bind解决了this作用域问题,es6有箭头函数解决这个问题 es5没有箭头函数。正常的js文件中必须包含的几个内容:1.在文件的开始,要引入当前js文件需要用到的html文件,调接口使用到的action文件,或者特定样式的css文件,引入HTML文件,格式是:”hbs!”+对应文件的整个路径,引入js文件,格式是:对应文件的整个路径,文件名不需要加后缀名js

 

Fish开发与使用

fish官网:https://fish.iwhalecloud.com/fish-show/

fish的各种APIhttps://fish.iwhalecloud.com/fish-desktop/api/index.html

审批系统使用es5,现在fish组件里面,用了大量的bind(this)方法,bind解决了this作用域问题,es6有箭头函数解决这个问题  es5没有箭头函数。

 

正常的js文件中必须包含的几个内容:

1.在文件的开始要引入当前js文件需要用到的html文件调接口使用到的action文件或者特定样式的css文件

引入HTML文件,格式是:hbs!”+对应文件的整个路径,

引入js文件,格式是:对应文件的整个路径,文件名不需要加后缀名js

引入css文件,格式是:”css!”+对应文件的整个路径,如:图1

1.png

在引入HTML文件和js文件的时候需要在function中进行定义2

2.png

对于css文件,只需要引入即可,

而对于html文件,在function中进行定义,还需要引入模板,如:图3

3.png


2.events:视图事件定义,大部分用来定义点击事件,或者移入移出事件,如:图4

 4.png

 

3.initialize:初始化定义,如:图5

其中包括从上一个界面传的值过来的,或者定义的grid表格的列,或者定义当前js中需要用到的全局变量。

 5.png

 

4.  afterRender:渲染之后处理函数,如:图6

6.png

以上4点就是正常的js文件中需要包含的内容,除此之外,在js中正常定义需要的函数,

还有一个js是比较特殊的,是actions文件夹中的,一般是放调用接口的,如:图7

 7.png


5.组件之间传值,分为两种,一种为传值到弹框内,一种为传值到新开的界面中

1.传值到弹框内的话,如:图8

8.png

 

PopupView为弹框,需要一个路径URL

viewOption中放入需要传到弹框里面的值,可以是单个字段,也可以是数组,

Close函数中就是对关闭弹框后,需要对当前界面进行的处理

2.传值到新开的界面中的话,如:图9

9.png


Selector中是当前html中需要传入的子视图选择器

url中传入子视图的路径

callback中放视图加载成功的回调函数

 

viewOption中放入需要传到子视图里面的参数,在对应的文件initialize中进行接收,如图10

10.png

 

 

相关文章
|
Ubuntu Shell Python
从 Zsh 迁移到 Fish,感觉还不错(下)
从 Zsh 迁移到 Fish,感觉还不错
171 0
|
Shell 数据安全/隐私保护 芯片
从 Zsh 迁移到 Fish,感觉还不错(上)
从 Zsh 迁移到 Fish,感觉还不错
199 0
|
Oracle 关系型数据库 MySQL
|
编解码 JavaScript 前端开发
Babel 入门指南
Babel 入门指南 ​️ 注意: Babel 可以与很多构建工具(如 Browserify、Grunt、Gulp 等)进行集成。由于本教程选择 Webpack ,所以只讲解与 Webpack 的集成。
1259 0
|
10月前
|
前端开发 关系型数据库 API
使用Next.js 13、Prisma、Postgresql 和 NextAuth 的全栈博客
使用Next.js 13、Prisma、Postgresql 和 NextAuth 的全栈博客
478 0
SWIG:SWIG的简介、安装、使用方法之详细攻略
SWIG:SWIG的简介、安装、使用方法之详细攻略
SWIG:SWIG的简介、安装、使用方法之详细攻略
|
SQL 存储 机器学习/深度学习
Python中内置数据库!SQLite使用指南! ⛵
使用Python内置库SQLite,可以方便地完成建表、插入数据、查询数据等数据库操作,也可以配合pandas进行灵活使用!高效工具库get!
1132 2
Python中内置数据库!SQLite使用指南! ⛵
|
SQL 负载均衡 前端开发
pgpool-II 4.3 中文手册 - 入门教程
pgpool-II 4.3 中文手册 - 入门教程
949 0
pgpool-II 4.3 中文手册 - 入门教程