Avalon Learning Notes UI article-How to disable Avalon's default AMD model and rewrite it with require.

I. How to prohibit Avalon's own AMD model

1, the use of avalon.shim.js this file, this file deleted the original AMD model, do not need to manually delete, modify. 2. Open Avalon.js This file, search for Avalon.config, and change true to false.
Second, download text.js and CSS.JS1, because Avalonui relies on HTML files and CSS files. 2. and Text.js and Css.js are preloaded in the configuration

1. priority:[‘text‘,‘css‘]

Three, complete configuration items

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(){
14. })

IV. directory Structure 1, basic all the UI I downloaded it down, so the file is a bit large, the files are all Avalonui components five, HTML page load Requirejs and Data-main

1. <scriptdata-main="../../main/datepicker"deferasync="true"type="text/javascript"src="../../bower_components/requirejs/require.js"></script>

1, defer async= "true" represents the asynchronous load, so don't worry, rendering problems six, specific documents written Datepicker_demo

2. define([‘avalon‘,‘notice‘],function(){
4. var model = avalon.define("noticeDemo", function(vm) {
6. vm.$bOpts = {
8. header: "提示信息title",
10. content: "提示信息content"
12. }
14. vm.changeHeader = function(id) {
16. var vmodel = avalon.vmodels[id];
18. vmodel.header = "new notice title"
20. }
22. vm.changeContent = function(id) {
24. var vmodel = avalon.vmodels[id];
26. vmodel.content = "new notice content, yeap !"
28. }
30. vm.toggleType = function(id) {
32. var typeArr = ["info", "success", "error"];
34. var noticeVM = avalon.vmodels[id];
36. var index = Math.floor(Math.random()*3);
38. noticeVM.type = typeArr[index];
40. }
42. vm.toggleNotice = function(id) {
44. var noticeVm = avalon.vmodels[id];
46. noticeVm.toggle = !noticeVm.toggle;
48. }
50. })
52. avalon.scan();
54. })

Seven, error and workaround 1, issue
See a 404 error is normal, UI components rely on a lot of things, so you have to correspond to the directory, the deletion. 2. Solution
Open the corresponding JS file, find the file, modify it to the correct directory. Summary: I am about to start my personal complete development of the front-end project, before the eldest brother with me to play, and now to play, the project manager said to use require, in fact, I want to use SEAJS, alas, require Chinese documents really not how, my English is not very good. The problem is quite many, also not too perfect, the project structure is chaotic, wait for the space to revise slowly. Try to do the best.

From for notes (Wiz)

Avalon Learning Notes UI article-How to disable Avalon's default AMD model and rewrite it with require.