码迷,mamicode.com
首页 > 其他好文 > 详细

avalon学习笔记ui篇-如何将avalon默认的amd模型禁止,以及用require重写。

时间:2015-05-05 00:00:55      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:

一、如何禁止avalon自带的amd模型

1、采用avalon.shim.js这个文件,这个文件删除了原本自带的amd模型,不需要手动删除,修改。
2、打开avalon.js这个文件,搜索avalon.config,将true改为false。
技术分享
二,下载text.js和css.js
1、因为avalonUI依赖了html文件和css文件。
2、并且将text.js和css.js,在配置中预加载
  1. priority:[‘text‘,‘css‘]
三、完整配置项
  1. require.config({
  2. //baseUrl:‘‘,
  3. paths:{
  4. ‘text‘:‘../file/text‘,
  5. ‘css‘:‘../file/css‘,
  6. ‘avalon‘:‘../bower_components/avalon/avalon.shim‘,
  7. ‘datepickers‘:‘../file/datepicker/avalon.datepicker‘,
  8. ‘notice‘:‘../file/notice/avalon.notice‘
  9. },
  10. priority:[‘text‘,‘css‘]
  11. })
  12. require([‘../demo/datepicker/app/datepicker_demo‘],function(){
  13. })
四、目录结构
1、基本所有UI我都下载了下来,所以文件有点大,file中是所有avalonUI组件
技术分享
五、html页面加载requirejs和data-main
  1. <scriptdata-main="../../main/datepicker"deferasync="true"type="text/javascript"src="../../bower_components/requirejs/require.js"></script>
1、defer async="true"代表了异步加载,所以不用担心,渲染问题
六、具体文件书写datepicker_demo
  1. define([‘avalon‘,‘notice‘],function(){
  2. var model = avalon.define("noticeDemo", function(vm) {
  3. vm.$bOpts = {
  4. header: "提示信息title",
  5. content: "提示信息content"
  6. }
  7. vm.changeHeader = function(id) {
  8. var vmodel = avalon.vmodels[id];
  9. vmodel.header = "new notice title"
  10. }
  11. vm.changeContent = function(id) {
  12. var vmodel = avalon.vmodels[id];
  13. vmodel.content = "new notice content, yeap !"
  14. }
  15. vm.toggleType = function(id) {
  16. var typeArr = ["info", "success", "error"];
  17. var noticeVM = avalon.vmodels[id];
  18. var index = Math.floor(Math.random()*3);
  19. noticeVM.type = typeArr[index];
  20. }
  21. vm.toggleNotice = function(id) {
  22. var noticeVm = avalon.vmodels[id];
  23. noticeVm.toggle = !noticeVm.toggle;
  24. }
  25. })
  26. avalon.scan();
  27. })
七,出现错误以及解决方法
1、问题
技术分享
看到一片404报错很正常,UI组件依赖了很多东西,所以要一一对应目录,进行删减。
2、解决方法
技术分享
打开对应的js文件,寻找到文件,修改为正确目录即可。
 
总结:我即将开始我个人完整开发前端的项目,以前都是老大带着我玩,现在要自己玩了,项目经理说要用require,其实我是想用seajs,唉,require的中文文档确实不怎样,我英文又不太好。问题蛮多的,也不太完善,项目结构混乱,待有空慢慢修改。尽力做到最好了。
 
 
 





avalon学习笔记ui篇-如何将avalon默认的amd模型禁止,以及用require重写。

标签:

原文地址:http://www.cnblogs.com/Zjingwen/p/4477990.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!