一直从事后端开发,对于前端的html+css+js,不熟不熟的。前面写了一个比较复杂的操作界面,我只能说,误工费时。花了一周研究avalonjs2,大神的确就是大神,解决了我很多的问题,

请参考http://www.cnblogs.com/rubylouvre

记录初试结果

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>我的SPA是没有#hash变化的</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="weui/weui.min.css" />
<link rel="stylesheet" href="weui/weui2.css" />
<link rel="stylesheet" href="weui/czh.css" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="ratchet/dist/css/ratchet.min.css" />
<link type="text/css" rel="stylesheet" href="css/fontstyle.css" />
<link type="text/css" rel="stylesheet" href="css/yjscanpage1.css" />
<link href="layer.m/need/layer.css" type="text/css" rel="stylesheet" />
<script src="../wx/layer.m/layer.m.min.js"></script>
<script src="avalon/avalon.modern.js"></script>
<style>
.ms-controller {
display: none;
}
</style>
<script>
avalon.component('ms-pager',{
template: '<div><a href="#/ms-header">ms-header</a><input type="text" ms-duplex-number="@num"/><button ms-on-click="@onPlus">+++</button></div>',
defaults:{
num:1,
onPlus:function(){
this.num++;
}
}
}); avalon.component('ms-button', {
template: '<div ms-visible="@toggle"><button type="button" ms-click="@toggle = !@toggle"><span><slot name="buttonText"></slot></span></button></div>',
defaults: {
buttonText: "button"
},
soleSlot: 'buttonText',
toggle:true
}); var tpl = '<div><a href="#/ms-pager">ms-pager</a><h4>{{@title}}</h4><h5>{{@random}}</h5><button ms-on-click="@onChangeTitle">点击改变title</button><button ms-on-click="@onRandom">获取随机数</button></div>';
avalon.component('ms-header',{
template:tpl,
defaults:{
title:"这是标题",
random:0,
onChangeTitle:function(){
this.title = '改变了title' + (new Date - 0);
},
onRandom:function(){
this.random = Math.floor(Math.random()*100)
}
}
}); var vm = avalon.define({
$id:'test',
tpl: '<div><a href="#/ms-header">ms-header</a></div>',
button: {//注意这里不能以 $开头
buttonText: "按钮内容"
},
dialogtpls:[],
opendialog: function (hash) {
vm.dialogtpls.push('<div><' + hash + ' ms-widget=\"{$id:"' + hash + '",cached: true}\"></' + hash + '></div>');//dialog样式
//var s = layer.open({
// content: vm.$element.querySelector(".showdialg div").innerHTML,
// style: 'background-color:#09C1FF; color:#fff; border:none;height:20px;'//,
// //time: 2
//}); },
showpage: function (hash) {
vm.tpl = '<div><' + hash + ' ms-widget=\"{$id:"' + hash + '",cached: true}\"></' + hash + '></div>';
},
closedialog: function () {
vm.dialogtpls.pop();// = '';
}
})
window.addEventListener('hashchange', function (e) {
var hash = e.newURL.split('#/')[1];
if (hash.indexOf("dialog") >= 0) {
}
else {
vm.tpl = '<div><' + hash + ' ms-widget=\"{$id:"' + hash + '",cached: true}\"></' + hash + '></div>';
}
});
</script>
</head>
<body ms-controller="test" style="position:relative">
<ul>
<li><a ms-click="@showpage('ms-header')">ms-header</a></li>
<li><a ms-click="@showpage('ms-pager')">ms-pager</a></li>
<li><a ms-click="@opendialog('ms-pager')">ms-dialog</a></li>
<li><a ms-click="@opendialog('ms-header')">ms-header</a></li>
<li><a ms-click="@closedialog('ms-pager')">ms-dialog</a></li>
</ul>
<div style="background-color:#f0f0f0;" ms-html="@tpl"> </div>
<div class="showdialg">
<div ms-for="el in @dialogtpls" ms-html="el"></div>
</div>
</body>
</html>

我这里使用的spa跟常规不一样,没有url#xxxx这种方式,

所想要的效果,就是业务配u1,u2,u3,设计调用方式之后,要用modal显示的,就modal显示,可以叠放,

或者是一般的替换u显示。这里的dialogtpls数组用于显示modal的,没有加modal样式和代码。

试用avalon2.0的更多相关文章

  1. iOS开发之AFNetworking 3.0.4使用

    昨天使用Cocoapods导入AFN做POST的时候,导入的最新版的3.0.4,突然发现找不到AFHTTPRequestOperationManager了...上github上一看,发现没有这个了.刚 ...

  2. Hbase1.0 客户端api

    最近在试用Hbase1.0的客户端API,发觉变化还是挺大(以前版本也不熟).到处都是deprecated. 现在应该是这样子: Configuration  conf = HBaseConfigur ...

  3. iOS开发之AFNetworking 3.0.4使用-OC

      GET请求 AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; [manager GET:URL parameters: ...

  4. avalon2对比avalon1 新增的功能汇总

    avalon2.0 与1.4,1.5相比, 2.0是移除了ms-repeat, ms-each, ms-with, ms-include, ms-include-src,ms-data, ms-sca ...

  5. uniGUI出新版本了,0.97.0.1081

    uniGUI出新版本了,0.97.0.1081,试用版0.97.0.1075,支持Delphi2006~XE7.下载地址是: http://www.unigui.com/downloads 已在XE6 ...

  6. avalon2学习教程08插入移除操作

    本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1 ...

  7. centos8平台:举例讲解redis6的ACL功能(redis6.0.1)

    一,为什么redis6要增加acl功能模块? 什么是acl? 访问控制列表(ACL)是一种基于包过滤的访问控制技术, 它可以根据设定的条件对接口上的数据包进行过滤,允许其通过或丢弃 redis6增加了 ...

  8. knockoutjs扩展与使用

    原来考虑使用avalon2.0 经过一周的试验,能力不够,用不起来.最终使用了knockout-3.4.js <!DOCTYPE html> <html> <head&g ...

  9. avalon学习笔记

    背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...

随机推荐

  1. js对Cookie的读写操作

    //读Cookie function getCookie(objName) {//获取指定名称的cookie的值 var arrStr = document.cookie.split("; ...

  2. 用Xcode 安装ipa,查看程序资源文件夹

    Xcode中的Devices工具就能够提供以上2项功能,不需要安装其他第三方工具了,见下面的截图:

  3. cocos2d-x宏定义

    1 ccp : The "ccp" prefix means: "CoCos2d Point" //查看: ../cocos2d-x-2.2/cocos2dx/ ...

  4. CentOS系统中基于Apache+php+mysql的许愿墙网站的搭建

    1.首先,我们需要两台虚拟机(CentOS7,Linux文本). 2.给两台虚拟机配置网络环境分别为桥接模式 CentOS7 ip为192.168.100.139.24,linux文本ip为192.1 ...

  5. 基于netty轻量的高性能分布式RPC服务框架forest<上篇>

    工作几年,用过不不少RPC框架,也算是读过一些RPC源码.之前也撸过几次RPC框架,但是不断的被自己否定,最近终于又撸了一个,希望能够不断迭代出自己喜欢的样子. 顺便也记录一下撸RPC的过程,一来作为 ...

  6. tp5 model 中的查询范围(scope)

    查询范围scope在model中定义,在controller中使用 namespace app\index\model; use think\Model; class User extends Mod ...

  7. 不常用的SQL语句记录

    只知道字段名,查询哪些表有该字段:假如字段名为Index select sysobjects.name as tablename,syscolumns.name as columnname from  ...

  8. DataGridView里CheckBox实现全选控制

    1. checkbox点击事件 private void myStyleDataGridView1_CellClick(object sender, DataGridViewCellEventArgs ...

  9. oracle打补丁

    oracle 数据库补丁安装(单实例) ------------24006111 注:务必先安装24006111再安装24315821,否则无法进行正常的补丁安装流程.1.关闭数据库监听和数据库实例 ...

  10. iOS 企业证书的使用文档

    IN-HOUSE应用程序分发 下面介绍下使用网络方式进行部署的方式,用户直接在iPhone/iPad的Safari浏览器里面输入URL地址即可安装, 注意:目前对于这种企业级开发的应用程序最好的分发方 ...