1、require模块
jsp页面中使用script标签引入require并使用模块,例如
<script src="${ctx}/require.js" data-main="${ctx}/news-survey.js"></script>
标签语义相当于先引入require,再require(‘news-survey.js’)
2、在js中使用新插件,由于require模块化使用AMD规范,因此从外部引入插件时必须先确定插件是否支持AMD规范,在插件主js文件(如swiper.jquery.js)底部查看是否有类似如下的导出代码(以swiper为例):
/*===========================
Swiper AMD Export
===========================*/
if (typeof(module) !== 'undefined')
{
module.exports = window.Swiper;
}
else if (typeof define === 'function' && define.amd) {
define([], function () {
'use strict';
return window.Swiper;
});
}
如有类似上述的代码,则可以引入到项目中,引入方式与其他插件一样。
3、flyui数据源fly.dataSource注意事项,只针对url请求模式:
- read中使用原始参数查询,参数用data声明对象
- dataFilter的回调函数的参数是json字符串,在该函数可以重新组装数据,但组装后的数据必须以json字符串的形式返回
- 在js中无参调用数据源方法,vm.ds.fetch()
- 在js中带参调用数据源方法,vm.ds.filter(params)
- 在js中获取数据源方法,vm.ds.data()
示例:
var id = fly.utils.getQueryString('id'), apiUrl = '';
// 视图模型
var vm = fly.observable({
param: {
title: ''
},
dataList: [],
// 列表数据源
ds: fly.dataSource({
read: {
url: `${apiUrl}`,
data: {id: id},
type: 'GET',
dataFilter: function(data) {
var res = fly.evalJSON(data);
res.rows.forEach(function(item) {
// 改造数据
......
})
// 如果在页面中没有直接使用ds而是使用dataList
vm.set('dataList', res.rows)
return JSON.stringify(res);
}
}
}),
refreshTable: function() {
var params = vm.get('param').toJSON();
vm.ds.filter(params);
}
})
// 如果在页面中没有直接使用ds而是使用dataList,进入页面立即使用js发起ds请求,否则会自动发起请求
vm.ds.fetch()
$(document).ready(function() {
fly.bind('body', vm);
});
4、运用模板在页面中使用数据源的数据
<!-- 直接使用ds作为数据源 -->
<tbody data-bind="source:ds" data-template="gridItem"></tbody>
<!-- 或使用dataList作为数据源 -->
<!-- <tbody data-bind="source:dataList" data-template="gridItem"></tbody> -->
<!-- 表格模版 -->
<script id="gridItem" type="text/html">
{{each $data as item i}}
<tr data-id="{{item.id}}">
......
</tr>
{{/each}}
</script>