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实现编辑功能
返回目录 这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
随机推荐
- Volley框架使用笔记
1.初始化请求队列 RequestQueue RequestQueue queue= Volley.newRequestQueue(context); 2.StringRequest 网络请求 Get ...
- php下载远程文件方法~
直接上代码: getFile("http://easyread.ph.126.net/N8gDl6ayo5wLgKbgT21NZQ==/7917056565549478184.jpg&quo ...
- python3 黑板客爬虫闯关游戏（四）
这关较第三关难度增加许多,主要多了并发编程 密码一共有100位,分布在13页,每页打开的时间在15秒左右,所以理所当然的想到要用并发,但是后来发现同IP访问间隔时间不能小于8秒,不然会返回404,所以 ...
- apple常用网址
https://developer.apple.com/ https://itunesconnect.apple.com/ iTunes Connect Developer Guide https:/ ...
- remove mysql
apt-get --purge remove mysql-server mysql-client mysql-common apt-get autoremove rm -rf /etc/mysql r ...
- C#操作XML总结
1.using System.Xml; using System.Xml; //初始化一个xml实例 XmlDocument xml=new XmlDocument(); //导入指定xml文件 xm ...
- ffmpeg-20160929-bin.7z
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 5 屏幕横向放大 20 像素 6 屏幕横向缩小 20 像素 S 下一帧 [ -2秒 ] +2 ...
- CentOS 7合盖后黑屏但不进入睡眠模式修改
CentOS 7合盖后黑屏但不进入睡眠模式修改 systemd 能够处理某些电源相关的 ACPI事件,你可以通过从 /etc/systemd/logind.conf 以下选项进行配置: HandleP ...
- axis2 调用webservice
maven配置:主要引用包及plugins <properties> <axis2.version>1.6.1</axis2.version> </prope ...
- Mac OS X 上安装 ASP.NET 5
在Mac OS X Yosemite 10.10.3 中搭建第一个 ASP.NET 5 Web 项目 终于有时间在 Mac 上安装一下 ASP.NET 5,网上有许多教程,但是多数的时间比较早了,版本 ...