访问视图

常见地视图模式时一个视图对应一个控制器,视图包含一个id,通过id传入控制器;在视图之中的元素则使用class

这里会使用jquery的选择器,为了减少使用,可以设置一个专门用于存放选择器到变量的映射表

<div id="users">
<form>
<input type="search" value="" placeholder="Enter a query">
<button type="button">Search</button>
</form>
</div> jQuery(function($) {
exports.SearchView = Controller.create({
//选择器局部变量名地映射
elements: {
"input[type=search]": "searchInput",
"form": "searchForm"
},
//实例化时调用
init: function(elem) {
this.el = $(elem);
this.refreshElements();
this.searchForm.submit(this.proxy(this.search));
},
search: function() {
console.log("Searching:", this.searchInput.val());
},
//私有
$: function(selector) {
//需要一个el属性,同时传入选择器
return $(selector, this.el);
},
//设置本地变量
refreshElements: function() {
for(var key in this.elements) {
this[this.elements[key]] = this.$(key);
}
}
});
new SearchView("#users");
});

委托事件

通过设置一个events对象代理,进行事件的委托和移除

jQuery(function($){
exports.SearchView = Controller.create({
//所有事件名称,选择器和回调的映射
events: {
"submit form": "search"
},
init: function(element){
//.....
this.delegateEvents();
},
search: function(){
//...
},
//根据第一个空格分割
eventSplitter: /^(\w+)\s*(.*)$/, delegateEvents: function(){
for (var key in this.events) {
var methodName = this.events[key];
var method = this.proxy(this[methodName]);
var match = key.match(this.eventSplitter);
var eventName = match[1], selector = match[2];
if (selector === '') {
this.el.bind(eventName, method);
} else {
this.el.delegate(selector, eventName, method);
}
}
}
});
new SearchView("#users");
});

状态机

  • 作用:管理多控制器,根据需要显示和隐藏视图

  • 组成: 状态和转换器; 它包含一个活动状态和许多非活动状态;

  var Events = {
bind: function() {
this.o = this.o || $({});
this.o.bind.apply(this.o ,arguments);
},
trigger: function() {
this.o = this.o || $({});
this.o.trigger.apply(this.o, arguments);
}
} var StateManchine = function() {};
StateManchine.fn =StateManchine.prototype;
//添加事件绑定或触发行为
$.extend(StateManchine.fn, Events);
//这个add函数将传入的控制器添加至状态列表并创建一个active函数;当调用active的时候,控制器状态转化为激活状态,对于激活状态的控制器,状态将基于它调用activate,对于其他控制器,状态机会调用deactivate;
StateManchine.fn.add = function(controller) {
this.bind("change", function(e, current) {
if(controller == current)
controller.activate();
else
controller.deactivate();
});
controller.active = $.proxy(function() {
this.trigger("change", controller);
}, this);
}; //使用
var con1 = {
activate: function() {
$("#con1").addClass("active");
},
deactivate: function() {
$("#con1").removeClass("active");
}
};
var con2 = {
activate: function() {
$("#con2").addClass("active");
},
deactivate: function() {
$("#con2").removeClass("active");
}
};
//创建状态机并添加状态
var sm = new StateManchine;
sm.add(con1);
sm.add(con2); //会触发con1.activate;con2.deactivate;
con1.active(); //会触发con2.activate;con1.deactivate;
sm.trigger("change", con2);

路由选择

由于应用是单页面的,URL一般不会变;当考虑到具体情况,需要对其进行改变

使用URL中的hash####

改变URL会造成页面刷新;操作URL的一种办法是改变hash值,因为hash不会发送给服务器,改变其不会造成刷新

//设置
window.location.hash = "foo";
//去掉#
var hashValue = window.location.hash.slice(1);

注意要限制这种改动的次数,过多的设置hash会影响性能,特别是在移动端,可能会造成页面频繁滚动

检测hash的变化####

监听

window.addEventListener('hashchange', function(event){});
  • 设置location.hash或修改hash后重新载入时触发;

mvc-4控制器和状态(2)的更多相关文章

  1. Javascript MVC 学习笔记(二) 控制器和状态

    今天进入第二个部分:控制器. 控制器和状态 从以往的开发经验来看.我们都是将状态保存在server的session或者本地cookie中,但Javascript应用往往被限制在单页面,所以我们也能够将 ...

  2. ASP.NET MVC 5 - 控制器

    MVC代表: 模型-视图-控制器 .MVC是一个架构良好并且易于测试和易于维护的开发模式.基于MVC模式的应用程序包含: · Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据 ...

  3. .NET/ASP.NET MVC Controller 控制器(IController控制器的创建过程)

    阅读目录: 1.开篇介绍 2.ASP.NETMVC IControllerFactory 控制器工厂接口 3.ASP.NETMVC DefaultControllerFactory 默认控制器工厂 4 ...

  4. MVC 在控制器中获取某个视图动态的HTML代码

    ASP.NET MVC 在控制器中获取某个视图动态的HTML代码   如果我们需要动态的用AJAX从服务器端获取HTML代码,拼接字符串是一种不好的方式,所以我们将HTML代码写在cshtml文件中, ...

  5. 三、ASP.NET MVC Controller 控制器(二:IController控制器的创建过程)

    阅读目录: 1.开篇介绍 2.ASP.NETMVC IControllerFactory 控制器工厂接口 3.ASP.NETMVC DefaultControllerFactory 默认控制器工厂 4 ...

  6. c#异步编程(三)—ASP.NET MVC 异步控制器及EF异步操作

    ASP.NET MVC 异步控制器及EF异步操作 异步控制器 ASP.NET MVC2后开始了对异步请求管道的支持,异步请求管道的作用是允许web服务器处理长时间运行的请求,比如 那些花费大量时间等待 ...

  7. [转]ASP.NET MVC 5 - 控制器

    MVC代表: 模型-视图-控制器 .MVC是一个架构良好并且易于测试和易于维护的开发模式.基于MVC模式的应用程序包含: · Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据 ...

  8. Spring MVC(三)--控制器接受普通请求参数

    Spring MVC中控制器接受参数的类方式有以下几种: 普通参数:只要保证前端参数名称和传入控制器的参数名称一致即可,适合参数较少的情况: pojo类型:如果前端传的是一个pojo对象,只要保证参数 ...

  9. ASP.NET MVC系列:控制器的Edit方法

    在前面我们已经介绍了如何创建控制器.视图和数据模型,运行之前的项目并打开Movies主页,将鼠标悬停在“编辑”菜单上,你会看到浏览器右下角显示了“编辑”链接的地址

随机推荐

  1. IE7 -- 鼠标移入显示下拉框 不显示的问题 / 以及宽度问题

    这个问题,真的是打击到我了,我一度不相信自己无法解决这个问题.但是我就是真的没有解决. 那么问题解决方案是: 第一 祖先级别有一个相对定位,父级再有一个定位,那么绝对定位显示出来的元素就会不显示. 第 ...

  2. Altera的几个常用的Synthesis attributes

    各厂商综合工具,对HDL综合时都定义了一些综合属性这些属性可指定a declaration,a module item,a statement, or a port connection 不同的综合方 ...

  3. 新浪微博的XSS漏洞攻击过程详解

    今天晚上(2011年6月28日),新浪微博出现了一次比较大的XSS攻击事件.大量用户自动发送诸如:“郭美美事件的一些未注意到的细节”,“建 党大业中穿帮的地方”,“让女人心动的100句诗歌”,“3D肉 ...

  4. HDU3344(小广搜+小暴力

    Kakuro Extension Extension Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  5. 【leetcode】Interleaving String

    Interleaving String Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. Fo ...

  6. 36.在字符串中删除特定的字符[Delete source from dest]

    [题目] 输入两个字符串,从第一字符串中删除第二个字符串中所有的字符.例如,输入”They are students.”和”aeiou”,则删除之后的第一个字符串变成”Thy r stdnts.”. ...

  7. kettle使用log4j管理输出日志

    在使用kettle进行数据分析和清洗时日志非常多而且杂乱,使用原有的日志有时找不到异常的位置,有时日志不够详细,说简单一点就是日志不是我们想要的.因而对kettle日志进行相应的管理就想得尤为重要了. ...

  8. Android的Observable和iOS的NotificationCenter

    使用起来很类似,参看以下网址http://stackoverflow.com/questions/10327200/equivalent-of-ios-nsnotificationcenter-in- ...

  9. 【Qt】学习笔记(一)

    1.setupUi(this) : setupUi(this)是由.ui文件生成的类的构造函数这个函数的作用是对界面进行初始化它按照我们在Qt设计器里设计的样子把窗体画出来 setupUi(this) ...

  10. Android中mesure过程详解

    我们在编写layout的xml文件时会碰到layout_width和layout_height两个属性,对于这两个属性我们有三种选择:赋值成具体的数值,match_parent或者wrap_conte ...