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实现编辑功能
返回目录 这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
随机推荐
- Unity 好坑的Save Scene
在编辑一个Untiy工程的时候,有很多的教程提到了 "Save Scene",也知道是干么用的.但是,后面打开工程的时候,工程界面是很多东西都不见了,又忘了有个Save Scene ...
- 用Xcode 安装ipa，查看程序资源文件夹
Xcode中的Devices工具就能够提供以上2项功能,不需要安装其他第三方工具了,见下面的截图:
- 关于imageOrientation
用相机拍出来的照片都含有EXIF信息,UIImage的imageOrientation属性指的就是EXIF中的orientation信息.如果我们忽略orientation信心,而直接对照片进行想速处 ...
- checked 全选 反选 示例
不多说看例子: 右上侧全选,然后每个栏又有一个栏目全选. 反选解决办法: function selectSubscibe(_class) { $("." + _class + &q ...
- CPrimerPlus第11章第10题
题目: 编写一个程序,读取输入,直到读入了10个字符串或遇到EOF,由二者中最先被满足的那个终止读取过程.这个程序可以为用户提供一个有5个选项的菜单:输出初始字符串列表.按ASCII顺序输出字符串.按 ...
- dom操作导致超级卡顿。。。
var i=0;j=30;setinterval(function(){ document.getElementId(idname).style.top=j+'px'; i<3?i++:i=0; ...
- 自定义注解之运行时注解(RetentionPolicy.RUNTIME)
对注解概念不了解的可以先看这个:Java注解基础概念总结 前面有提到注解按生命周期来划分可分为3类: 1.RetentionPolicy.SOURCE:注解只保留在源文件,当Java文件编译成clas ...
- 常用类string的用法
在Java中string是我们用的很多的一种类,下面就来说说string类中经常用到的一些方法. 1.string与数组相关的方法: 比如:string str = "fsafdsafdas ...
- 测试css
<h1>shell使用指南</h1> <h2>ZMODEM功能</h2> <pre><code>yum install lrzs ...
- splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素: <script type="text/javascript"> var arr = new Ar ...