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

一、如何禁止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的中文文档确实不怎样,我英文又不太好。问题蛮多的,也不太完善,项目结构混乱,待有空慢慢修改。尽力做到最好了。

来自为知笔记(Wiz)

时间: 05-04

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

avalon学习笔记ui篇-datepicker篇

一.介绍 首先avalon是我接触的第一个mvvm框架,angularjs也能实现基本同样的功能,但是老外的产物都是比较先进的,他们早已放弃在IE下摸爬滚打,作为大天朝的我们,还是必须要矜矜业业的伺候着IE6,这就是我为什么选择avalon,没用angularjs的原因.官方文档都是老写法,这让我忍不住深深的吐槽正美,好吧,维护一个框架是艰难的,正美加油吧. 二.日历插件篇datepicker 官方文档的参数: <!DOCTYPE HTML> <html> <head>

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

Qt学习总结-ui篇(二)

qccs定义圆角 border-radius:10px; 如果想给特定位置定义圆角,如: 左上角:border-left-top-radius:10px; 右下角色:border-right-bottom-rasius:10px; 半透明效果 只需要在css中使用rgba(100,100,100,40)这种形式来表示颜色即可. 为可执行文件添加图标 1.新建文件:finename.rc 文件名无所谓,只要后缀为rc就可以. 2.编辑新建的文件,输入以下内容: IDI_ICON1 ICON DIS

SystemTap 学习笔记 - 安装篇

https://segmentfault.com/a/1190000000671438 在安装前,需要知道下自己的系统环境,我的环境如下: uname -r 2.6.18-308.el5 Linux 2.6.18-308.el5 #1 SMP Tue Feb 21 20:06:06 EST 2012 x86_64 x86_64 x86_64 GNU/Linux 安装 为了部署 SystemTap,需要安装以下两个 RPM 包: systemtap systemtap-runtime 以 root

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

渗透学习笔记--基础篇--sql注入(字符型)

环境:dvwa1.7数据库:mysql前置知识:sql语句(Click me)      在进行sql注入前,我们先熟悉熟悉select语句.一.打开我们的sql终端 二.进入之后可以看到有mysql>我们输入sql语句,即可返回我们想要的结果,注意分号哟!我们使用的dvwa,在我们前几章设置的时候,会在数据库中生成一个dvwa的database:这里我们使用它来进行我们的select 语句:(1)使用dvwa数据库use dvwa;(2)在users表里查询用户名为'admin'的所有信息se

iOS开发学习笔记:基础篇

iOS开发需要一台Mac电脑.Xcode以及iOS SDK.因为苹果设备都具有自己封闭的环境,所以iOS程序的开发必须在Mac设备上完成(当然,黑苹果应该也是可以的,但就需要花很多的精力去折腾基础环境),Xcode是一个集成开发环境,包括了编辑器.调试.模拟器等等一系列方便开发和部署的工具,iOS SDK则是开发应用所必需,不同的SDK分别对应不同的iOS版本或设备,通常我们需要下载多个iOS SDK以确保我们开发的程序能够在不同版本的iOS上正常运行. 创建新工程 Xcode提供了很多种工程模