knockoutjs扩展与使用
原来考虑使用avalon2.0 经过一周的试验，能力不够，用不起来。最终使用了knockout-3.4.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>仅仅是一个测试,喵</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link href="layer.m/need/layer.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="knockout/knockout-3.4.0.js"></script>
<script type="text/javascript" src="knockout/knockout-mapping-latest.js"></script>
<script type="text/javascript" src="knockout/date-format.js"></script>
<script type="text/javascript" src="knockout/number-calculate.js"></script>
</head>
<body>
<script type="text/temp" id="dialog-template">
<div class="layermbox layermshow" data-bind="css:layercss">
<!--ko if:shade-->
<div class="laymshade" data-bind="click:$root.closeMe"></div>
<!--/ko-->
<div class="layermmain" data-bind="style:{'position':(fixed===true)?'static':'fixed','z-index':$root.pagenames().length+99}">
<div class="section">
<div class="layermchild layermborder" data-bind="css:anim,attr:{style:style}">
<!--ko if:title-->
<h3 data-bind="text:title"></h3><button type="button" class="layermend" data-bind="if:shade,click:$root.closeMe"></button>
<!--/ko-->
<div class="layermcont">
<!--ko if:soncomponentname-->
<div data-bind="component:{name:soncomponentname,params:{paramsdata:soncomponentparams}}"></div>
<!--/ko-->
</div>
<!--ko if:dialogbtns.length > 0-->
<div class="layermbtn">
<!--ko foreach:dialogbtns-->
<span data-bind="click:$data.btnevent,text:$data.btnname"></span>
<!--/ko-->
</div>
<!--/ko-->
</div>
</div>
</div>
</div>
</script> <div style="overflow:hidden;position: relative;height: 100%;">
<div data-bind="text:pagename" style="display:none;"></div>
<div data-bind="component:pagename"></div>
<div data-bind="foreach:pagenames">
<div data-bind="component:{name:'dialog',params:{options:$data.dialogoptions}}"></div>
</div>
</div> <!--提示自动关闭-->
<script id="promptinfo-template" type="text/template">
<div data-bind="html:prompinfo">
</div>
</script> <script type="text/template" id="demoh-template">
第一页
<span data-bind="text:fuckdata.name"> </span>
<button type="button" data-bind="click:fuckback">转到另一个地方去</button>
</script> <script type="text/html" id="page1-template">
<span>page1view</span>
<div data-bind='template: { name: "page1part1view-template"}'></div>
<button type="button" data-bind="click:addnewpage">显示一个确认对话框</button>
<button type="button" data-bind="click:goback">转回去</button>
</script>
<script type="text/html" id="page1part1view-template">
<span>page1partview</span>
</script>
<script type="text/html" id="page2-template">
<span>page2view</span>
</script> <script type="text/javascript">
//格式化开始
ko.bindingHandlers.accountingMoney = {
symbol: '¥',
precision: 2,
thousand: ",",
decimal: ".",
format: "%s%v",
update: function (element, valueAccessor, allBindingsAccessor) {
return ko.bindingHandlers.text.update(element, function () { var value = +(ko.unwrap(valueAccessor()) || 0),
symbol = ko.unwrap(allBindingsAccessor().symbol !== undefined ? allBindingsAccessor().symbol : ko.bindingHandlers.accountingMoney.symbol),
precision = ko.unwrap(allBindingsAccessor().precision !== undefined ? allBindingsAccessor().precision : ko.bindingHandlers.accountingMoney.precision),
thousand = ko.unwrap(allBindingsAccessor().thousand !== undefined ? allBindingsAccessor().thousand : ko.bindingHandlers.accountingMoney.thousand),
decimal = ko.unwrap(allBindingsAccessor().decimal !== undefined ? allBindingsAccessor().decimal : ko.bindingHandlers.accountingMoney.decimal),
format = ko.unwrap(allBindingsAccessor().format !== undefined ? allBindingsAccessor().format : ko.bindingHandlers.accountingMoney.format); var newvalue =
accounting.formatMoney(value,
symbol,
precision,
thousand,
decimal,
format);
return newvalue;
});
}
}; ko.bindingHandlers.accountingNumber = {
precision: 2,
thousand: ",",
decimal: ".",
update: function (element, valueAccessor, allBindingsAccessor) {
return ko.bindingHandlers.text.update(element, function () {
var value = +(ko.unwrap(valueAccessor()) || 0),
precision = ko.unwrap(allBindingsAccessor().precision !== undefined ? allBindingsAccessor().precision : ko.bindingHandlers.accountingMoney.precision),
thousand = ko.unwrap(allBindingsAccessor().thousand !== undefined ? allBindingsAccessor().thousand : ko.bindingHandlers.accountingMoney.thousand),
decimal = ko.unwrap(allBindingsAccessor().decimal !== undefined ? allBindingsAccessor().decimal : ko.bindingHandlers.accountingMoney.decimal);
var newvalue =
accounting.formatNumber(value,
precision,
thousand,
decimal);
return newvalue;
});
}
}; ko.bindingHandlers.datetext = {
format: "yyyy-MM-dd",
update: function (element, valueAccessor, allBindingsAccessor) {
return ko.bindingHandlers.text.update(element, function () {
//alert("确不能绑定?");
var oldvalue = Date.format(new Date(), 'yyyy-MM-dd HH:mm:ss'); var value = (ko.unwrap(valueAccessor()) || oldvalue),
precision = ko.unwrap(allBindingsAccessor().format !== undefined ?
allBindingsAccessor().format : ko.bindingHandlers.datetext.format);
var datevalue = Date.format(Date.parseFormatted(value, 'yyyy-MM-dd HH:mm:ss'),
precision);
return datevalue;
});
}
}; ko.virtualElements.allowedBindings.accountingMoney = true;
ko.virtualElements.allowedBindings.accountingNumber = true;
ko.virtualElements.allowedBindings.datetext = true; ko.components.register('dialog', {
template: { element: 'dialog-template' },
viewModel: function (params) {
var self = this;
self.type = params.options.type || 0;
self.title = params.options.title || '';
self.soncomponentname = params.options.dialogcomponent || '';
self.shade = params.options.shade;
self.shadeClose = params.options.shadeClose;
self.fixed = params.options.fixed;
self.anim = params.options.anim || '';
self.time = params.options.time || 0;
self.style = params.options.style || '';
self.layercss = params.options.cssname || '';
self.time = params.options.time || 0; self.closeMe = function () {
if (self.shadeClose) {
vm.pagenames.pop();
}
};
self.closeAll = function () {
vm.pagenames.removeAll();
};
self.ID = "dialog";
self.soncomponentparams = params.options.data;
self.dialogbtns = params.options.btns || [];
if (self.time) {//N秒后自动关闭
var timeoutpoint = setTimeout(function () {
vm.pagenames.pop();
}, self.time * 1000);
}
}
}); ko.components.register('promp', {
template: '<div data-bind="template:{name:\'promptinfo-template\'}"></div>',
viewModel: function (params) {
self.ID = "promp";
self.prompinfo = params.paramsdata;
}
}); ko.components.register('my-special-list', {
template: { element: 'demoh-template' },
viewModel: function (params) {
this.mywidth = '100px';
this.fuckdata = {
name: '喵'
};
this.fuckback = function () {
alert("有没有那么一首歌，能让你想起我哦！");
vm.pagename("page1");
}
this.addnewpage = function () {
vm.pagenames.pop();
}
}
}); ko.components.register('page1', {
template: { element: 'page1-template' },
viewModel: function (params) {
this.addnewpage = function () {
vm.ShowMessagInfo("hs", "真的看到呢", "", 0);
//vm.pagenames.push('page1');
}
this.goback = function () {
vm.pagename("my-special-list");
}
} }); var vm = {
/*高度*/nowheight: function () {
return (document.body.clientHeight - 50) + 'px';
},
/*显示页*/pagename: ko.observable("my-special-list"),
/*显示dialog*/showdailog: function (title, component, anim, style, data, cssname, btns, time) {
vm.pagenames.push({
dialogoptions: {
title: title || '',
dialogcomponent: component,
type: 0,
shade: true,
shadeClose: true,
fixed: false,
anim: anim || '',
style: style,//'width:80%;height:font-size:16px;'
data: data || '',
cssname: cssname || '',
btns: btns || [],
time: time || 0
}
});
},
/*全屏显示dialog*/showdailognotitlefull: function (component, data) {
vm.showdailog('', component, 'a-bounceinR', 'padding:0;width:100%;height:100%;background-color:transparent;', data || '', 'layermbox10');
},
/*显示dialog在中间*/showdailognotitlemiddle: function (component, data) {
vm.showdailog('', component, '', 'top: 5%;height: 80%;width: 100%;margin: 0 20px;overflow: auto;', data || '', 'layermbox0');
},
/*显示信息*/ShowMessagInfo: function (/*标题*/MsgTitle,/*内容可以是html*/Msg,/*样式*/MsgStyle, /*0:确认,1:确认,取消,其它自动关闭*/MsgType, /*按钮名称*/MsgBtns, /*按钮事件*/MsgEvents) {
if (!MsgType && isNaN(MsgType - 0)) {
MsgType = 0;
}//默认为0
var btns = [];
btns.push({
btnname: '确认',
btnevent: function (el) {
vm.closeMe();
}
});
btns.push({
btnname: '取消',
btnevent: function (el) {
vm.closeMe();
}
});
var timer = undefined;
if (MsgType === 0) {
btns.pop();//不要取消
}
else if (MsgType === 1) {
}
else {
timer = MsgType - 0;
btns.slice(0, btns.length);
} if (btns.length) {
for (var i = 0; i < btns.length; i++) {
if (MsgBtns) {
if (MsgBtns.length > i) {
btns[i].btnname = MsgBtns[i];
}
} if (MsgEvents) {
if (MsgEvents.length > i) {
btns[i].btnevent = MsgEvents[i];
}
}
}
} vm.showdailog(MsgTitle || '', 'promp', '', MsgStyle || 'width:80%;font-size:16px;', Msg, '', btns, timer);
},
/*所有的dialogs*/pagenames: ko.observableArray([]),
/*关闭当前dialog*/closeMe: function () {
vm.pagenames.pop();
},
/*关闭所有dialog*/closeAll: function () {
vm.pagenames.removeAll();
}
}; ko.applyBindings(vm); </script>
</body>
</html>
引用需要自己处理。
knockoutjs扩展与使用的更多相关文章
- MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength
返回目录 为什么要对minLength和maxLength这两个方法进行扩展呢,是因为这样一个需求,在用户注册时,可以由用户自己决定他们输入的字符,中文,英文,数字均可,这样做了之后,使用户的体验更好 ...
- MVVM架构~knockoutjs系列之扩展ajax验证~验证数据是否存在
返回目录 在大部分网站里,用户名都是唯一的,即当用户注册时,如果用户输入的名字不合法,我们需要提示用户,让用户再起个新名字,而这种复杂的验证一般是通过JS来实现的,如果把它集成到ko里,那就完美了.有 ...
- MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等
返回目录 在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章 ...
- KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法
注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写D ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证
验证: 快要完成我们程序的界面部分了.剩下的事情就是在用户点击 "保存" 的时候管理验证问题了.验证是主要需求,今天就是最无知的应用也不会忽视它.通过正确的验证,用户可以知道应该输 ...
- SignalR + KnockoutJS + ASP.NET MVC4 实现井字游戏
1.1.1 摘要 今天,我们将使用SignalR + KnockoutJS + ASP.NET MVC实现一个实时HTML5的井字棋游戏. 首先,网络游戏平台一定要让用户登陆进来,所以需要一个登陆模块 ...
- MVVM架构~Knockoutjs系列之验证机制的引入
返回目录 对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.va ...
- MVVM架构~使用boxy和knockoutjs实现编辑功能
返回目录 这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
随机推荐
- TransmitFile函数的简单使用
简述 TransmitFile是一个扩展的 API,它允许在套接字连接上发送一个打开的文件.这使得应用程序可以避免亲自打开文件,重复地在文件执行读入操作,再将读入的那块数据写入套接字.相反,已打开的文 ...
- [CodeWars][JS]实现链式加法
在知乎上看到这样一个问题:http://www.zhihu.com/question/31805304; 简单地说就是实现这样一个add函数: add(x1)(x2)(x3)...(xn) == x1 ...
- CSS3中的px,em,rem,vh,vw辨析
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...
- Python全栈【Socket网络编程】
Python全栈[socket网络编程] 本章内容: Socket 基于TCP的套接字 基于UDP的套接字 TCP粘包 SocketServer 模块(ThreadingTCPServer源码剖析) ...
- CornerStone的使用
俗话说:"工欲善其事必先利其器": 对于我们程序员来说,不管你是大神,还是小鱼小虾,进入公司之后,都用过源码管理工具,不然你就不是一个合格的程序员,现在各个公司用于源码管理工具通常 ...
- 点击页面判断是否安装app并打开，否则跳转app store的方法
常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用 ...
- VS2013 密钥 – 所有版本
Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9 Visual Studio Premium 2013 KEY(密钥) ...
- kill命令
*杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志. 首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令: # kill -pid 注释:标准的kill命令通 ...
- Socket通信功能实现
前段时间写的小功能,包含了较为详细的代码注释,需要的可以下载看下.对你有一点用,请赞一个~~ http://www.cnblogs.com/zhili/category/397082.html 这里 ...
- Android Studio accelerator key（shortcut）& Basic knowledge
shift + F6 重构(选文件,ok->下面的控制台,do refactor option + return 快速修复 Activity@Extra() Intent: @FragmentA ...