在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌。
组件是由JS,HTML,CSS构成
JS 以AMD形式组织,引入HTML与CSS
HTML是组件的模板, 模板里面使用ms-*等指令
JS内部是一个avalon.component方法的调用
avalon.component有两个参数,第一个是标签名(务必全部小写并且中间存在冒号,冒号前面是ms, oni等表示UI库的名字,默认ms已经生效,否则要用avalon.library来声明,冒号后面是组件的名字)
下面一个样板代码:
define([ "avalon" , "template.html" , "style.css" ], function (avalon, template){ |
var _interface = function (){} |
avalon.component( "ms:button" ,{ |
aMethod: _interface , //组件的方法,在开始必须为空方法 |
bMethod: _interface, //组件的方法,在开始必须为空方法 |
onAevent: _interface, //组件的事件回调,在开始必须为空方法,必须以on开头,后面是大写,如onSelect |
onBevent: _interface, //组件的事件回调,在开始必须为空方法, 必须以on开头,后面是大写 |
//vm就是当前组件的vm, el就是此自定义标签 |
$ready: function (vm, el){ |
$dispose: function (vm, el){ |
avalon.component会在该组件$init回调被调用时,在avalon.vmodels上添加该组件的VM,此VM就是$init, $ready, $dispose传入的第一个参数,它拥有a, b, aMethod, bMethod等你声明好的属性与方法。
当然,其实还有$construct, $$template, $childReady等回调,还有$replace, $container, $slot等配置项。详见官网
然后你在页面引入avalon,与该组件的JS(当然以AMD方式引入),然后页面使用<ms:button></ms:button>这组件就会自动实例化!
至于组件里面有什么东西,就要看你的template有什么东西。
如果你在使用自定义标签时,<ms:button c="111"></ms:button> ,那么组件的VM就会多出一个c属性,值为111, 因为标签内,除了id,$id, $slot, data-*属性, ms-*属性都会自动复制到vm上。如果是一个弹出层,众所周知,弹出层都有title与content这两大区域,你又不想写在JS中,可以直接写在自定义标签,那么可以使用HTML5的插入点机制。
自定义标签下的子元素如果带有slot属性,它们就转换同名的vm属性,其值是一个文档碎片,包括着刚才的p与div标签
avalon.component("ms:dialog",{ |
title:"",//这两个属性需要预先声明,到时会变成文档碎片 |
$ready: function(vm, elem){} |
然后你模板里面ms-html绑定,它就会自动填空到里面去。比如我们是这样定义ms:dialog组件的模板:
< div class = "oni-dialog-inner" > |
< div class = "oni-dialog-header" > |
< div class = "oni-dialog-close" ms-click = "_close" ms-if = "showClose" > |
< i class = "oni-icon oni-icon-times" ></ i > |
< div class = "oni-dialog-title" >{{ title|html }}</ div > |
< div class = "oni-dialog-content" >{{content|html}}</ div > |
< div class = "oni-dialog-footer oni-helper-clearfix" > |
< div class = "oni-dialog-btns" > |
< oni:button data-button-color = "success" ms-hover = "oni-state-hover" ms-click = "_confirm" >{{confirmText}}</ oni:button > |
< oni:button ms-if = "type =='confirm'" ms-click = "_cancel" >{{cancelText}}</ oni:button > |
有了插入点机 ,我们为组件添加大片的内容就非常简单。并且组件里面还可以有其他代表组件的自定义标签。这样一层层累积木,既直观又轻松。由于它存在严密的生命周期管理,我们也不怕如何计算父组件这样的难题了。有关组件的宽高计算,然后在$ready回调里计算,因为这时子组件肯定渲染才会执行上方父组件的$ready!
大家可以参考这里的组件源码进行学习,打造自己一套UI库。
- 如何做一个avalon组件
在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌. 组件是由JS,HTML,CSS构成 JS 以AMD形式组织,引入HTML ...
- 一步步编写avalon组件02:分页组件
本章节,我们做分页组件,这是一个非常常用的组件.grid, listview都离不开它.因此其各种形态也有. 本章节教授的是一个比较纯正的形态,bootstrap风格的那种分页栏. 我们建立一个ms- ...
- 一步步编写avalon组件01:弹出层组件
avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...
- 基于avalon1.4.x ----分页组件编写
avalon分页组件 (1.4.x版本) 随着avalon2的推出,avalon1的官网已经不再维护了,现在似乎是找不到avalon 1.4版本的官方文档了,所以本文章所有的内容均不保证正确性,只能保 ...
- 迷你MVVM框架 avalonjs1.5 入门教程
avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVV ...
- 搭建docker私有仓库 笔记
抄送消息到企业微圈 avalon组件 twitterCopy/twitterCopy 说明 说明 说明 说明 说明 说明 该组件提供接口 开发者可以吧 有需要分享到微圈的的信息 发布到微圈中去. 应用 ...
- avalon实现分页组件
前言 分页组件比较常见,但是用avalon实现的见的不多,这个分页组件,可以适配2种分页方式, 第一种是每次点击下一页,就请求一次后台,并返回当页数据和总条数,我称之为假分页: 第二种是一次性把所有数 ...
- SUI分页组件和avalon搞定ajax无刷新分页
<div ms-controller="main"> <h2 class="pagination-centered">{{ title ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
随机推荐
- hdu2089不要62(数位dp)
#include <stdio.h> #include <string.h> ][]; ]; /* dp[i][0] 不含62,4 dp[i][1] 2开头 dp[i][2] ...
- Follow your hear(跟着心走)
端午三天的哈尔滨之旅已经over,非常开心真的非常开心.听了刘四风老师的"为爱开讲.我爱这世界"的论坛,尽管.这三天老师讲的不多.可是句句是精华.Follow your heart ...
- VC6 鼠标钩子 最简单样例
Windows系统是建立在事件驱动的机制上的,说穿了就是整个系统都是通过消息的传递来实现的.而钩子是Windows系统中非常重要的系统接口,用它能够截获并处理送给其它应用程序的消息,来完毕普通应用程序 ...
- Cocostudio学习笔记(4) LoadingBar+ TextField
这同时录制两个控件的使用方法:LoadingBar和 TextField. -------------------------------------------------------------- ...
- Visual Studio 2010 将网站直接发布到远程站点
原文:Visual Studio 2010 将网站直接发布到远程站点 这次说下如何将web应用程序直接发布到IIS服务器站点!!! 问题的由来 本人每天要发布更新的程序,所以每次更新的时候要做的工作: ...
- Echache整合Spring缓存实例讲解(转)
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要介绍了EhCache,并通过整合Spring给出了一个使用实例. 一.EhCac ...
- HDoj-2084-号码塔-dp
号码塔 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- Harry Potter and the Prisoner of Azkaban
称号:Harry Potter and the Prisoner of Azkaban 作者:J.K. Rowling 篇幅: 448页 蓝思值:880L 用时: 11天 工具: 有道词典 [ ...
- POJ - 3249 Test for Job (DAG+topsort)
Description Mr.Dog was fired by his company. In order to support his family, he must find a new job ...
- android性能测试内存泄漏
1.什么是内存泄漏? 适用于该系统的内存使用内存泄漏,未回复(释放),该内存可以没有事业,也不能被其他人使用使用自己. 2.出有什么差别? 内存泄漏是分配出去的内存无法回收. 内存 ...