一直从事后端开发,对于前端的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. [转载]jquery版小型婚礼(可动态添加祝福语)

    原文链接:http://www.cnblogs.com/tattoo/p/3788019.html 前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我 的百度生涯,一直 ...

  2. C语言 独木舟问题

    n个人,已知每个人体重,独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? 分析:贪心算法,抽象化 ...

  3. python 使用pymssql连接sql server数据库

    python 使用pymssql连接sql server数据库   #coding=utf-8 #!/usr/bin/env python#------------------------------ ...

  4. QT特供 CGAL配置流程(基于QT5+VS2015)

    最近做的QT项目涉及计算几何库,需要用到CGAL,其配置着实麻烦,而且相互关联的软件也存在版本兼容一类的问题,在这里就对其配置流程做一些整理说明,以便后来者能够少些烦恼.(注:以下使用Win10作说明 ...

  5. Spring + Jedis集成Redis(集群redis数据库)

    前段时间说过单例redis数据库的方法,但是生成环境一般不会使用,基本上都是集群redis数据库,所以这里说说集群redis的代码. 1.pom.xml引入jar <!--Redis--> ...

  6. wpf 悬浮窗口的实现

    又到了写点东西的时候,因为有了新的收获,所以用随笔来记录下自己的成长.话不多说,正入主题. 最近又遇到一个新的需求,有一组控件,需要悬浮显示在面板的边缘上,刚开始的时候,是不显示的,点击后显示,然后再 ...

  7. 常用 Git 命令

    拉取远端仓库代码: 如果本地已经存在文件夹,先cd进去,然后敲命令: git fetch (作用是拉取远端仓库里的代码) git merge (作用是将远端仓库里的代码与本地仓库里的代码合并,如果有冲 ...

  8. Mysql Master-slave 主从配置

    MySQL主从复制 场景描述:主数据库服务器:192.168.10.130,MySQL已经安装,并且无应用数据.从数据库服务器:192.168.10.131,MySQL已经安装,并且无应用数据. 2. ...

  9. Scrapy 爬虫 使用指南 完全教程

    scrapy note command 全局命令: startproject :在 project_name 文件夹下创建一个名为 project_name 的Scrapy项目. scrapy sta ...

  10. electrica writeup

    关于 caesum.com 网上上的题目,分类有Sokoban,Ciphers,Maths,Executables,Programming,Steganography,Misc.题目有点难度,在努力奋 ...