一直从事后端开发，对于前端的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. latex公式编号

    1 \begin{flalign*} 2 % In this way (this arrange of &), the equation will in the center and alig ...

  2. 利用SQLite_Expert实现Excel表转SqLite数据库

    1.保留excel数据中需要的字段,删除无关字段. 2.将excel另存为cvs格式文件.<另存名称如:jizhan.cvs 则导入后表名即为jizhan> 3.看下图,新建数据库,命名为 ...

  3. 安装第三方APP好的站点及解除安全与隐私限制

    一.解除安全与隐私限制的任何来源. http://bbs.feng.com/read-htm-tid-10714286.html 接下来,我们就打开终端,然后输入以下命令:   sudo spctl ...

  4. MySql: 查看当前登录用户,当前数据库

    mysql> select user();+----------------+| user() |+----------------+| root@localhost |+----------- ...

  5. EasyuI comboxTree 使用笔记

    继承至 $.fn.combo.defaults 和$.fn.tree.defaults.覆盖默认值$.fn.combotree.defaults. combotree结合选择控制和下拉树,类似于com ...

  6. Clang与libc++abi库安装

    系统ubuntu64位 Clang4.0 参考: 1 https://github.com/yangyangwithgnu/use_vim_as_ide#0.1 其中 第7章 工具链集成 2. htt ...

  7. 解决文件上传插件Uploadify在火狐浏览器下，Session丢失的问题

    因为在火狐浏览器下Flash发送的请求不会带有cookie,所以导致后台的session失效. 解决的方法就是手动传递SessionID到后台. $("#fileresultfiles&qu ...

  8. RabbitMQ的几种应用场景

    RabbitMQ是一个消息代理,从“生产者”接收消息并传递消息至“消费者”,期间可根据规则路由.缓存.持久化消息.“生产者”也即message发送者以下简称P,相对应的“消费者”乃message接收者 ...

  9. java web系统中时间比sql server中的日期少2天的解决办法

    系统环境 jdk:1.7 数据库:sql server 2008 问题描述 升级1.7之后查询出来的日期就比数据库中的少2天,降回1.6版本的jdk就正常了. 问题原因及解决办法 国内网站有很多不靠谱 ...

  10. Unity引擎下最快的Xml读取器:UnityRapidXml

    近期发现无论是系统的System.Xml还是Mono.Xml,其实都有这样或者那样的问题,所以决定自己搞一个快一点的xml parse.以前在C++里用过rapidxml,这个确实是神一般的存在,速度 ...