一直从事后端开发，对于前端的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. crontab详解

    搜索 纠正错误  添加实例 crontab 提交和管理用户的需要周期性执行的任务 补充说明 crontab命令 被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成 ...

  2. AJAX获取数据成功后的返回数据如何声明成全局变量

    var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=se ...

  3. DevExpress 关于alertControl 图片显示

    private void button1_Click(object sender, EventArgs e) { AlertInfo info = new AlertInfo("Captio ...

  4. Apache 服务器搭建 总结

    安装素材准备:<1>下载jdk <2>下载apache2.0.55 <3>下载tomcat5.5 <4>下载jk(mod_jk-apache-2.0.5 ...

  5. 第一章 简单工厂模式 及 UML中类图的表示方法

    写一个简单计算器程序时,可以写一个操作类,然后加.减.乘.除操作分别继承它,复写操作计算结果的方法.写一个简单工厂类,通过输入的操作符,使用操作类来new一个相应的操作类的子类对象.这样,工厂就实例化 ...

  6. (转载)org.springframework.web.context.ContextLoaderListener

    http://www.yihaomen.com/article/java/471.htm 刚才手贱乱点了下,然后好像jar包不见了还是什么的,出现了这个错误,按照帖子说的,手动添加maven进去就好了

  7. C#重启IIS指定网站和指定应用程序池

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. IP地址，子网掩码，默认网关，DNS服务器知识详解（转）

    转自:http://www.cnblogs.com/JuneWang/p/3917697.html 为了更深入的学习TCP/IP协议,最近看了不少有关资料,收集整理记录如下,以备后面的使用和方便各位学 ...

  9. jq 模板

    菜鸟教程1.4.6版本angularJS <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ...

  10. eclipse启动不了，出现“Java was started but returned exit code=13......”对话框

    eclipse启动不了,出现"Java was started but returned exit code=13......"对话框如下 解决方案:1.使用的是java jdk6 ...