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实现编辑功能
返回目录 这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
随机推荐
- 微信小程序技术分析：Mustache语法要点总结
小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户 ...
- airflow 优化
1. 页面默认加载数据过多,加载慢. 修改 .../python2.7/site-packages/airflow/www/views.py文件, 1823行, page_size参数, 比如改成18 ...
- eclipse逐步调试
Eclipse 的单步调试 1.设置断点在程序里面放置一个断点,也就是双击需要放置断点的程序左边的栏目上.2.调试(1)点击"打开透视图"按钮,选择调试透视图,则打开调试透视图界面 ...
- 使用KRPano资源分析工具解密被加密的XML
软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...
- SQL Server 从数据库中查询去年的今天的数据的sql语句
因为最近的项目的一个小功能需要实现当前数据和历史的今天做一个对比.在网上也查了很久,很多都是实现一个月内的,一年内的所有数据,昨晚突然就找到了下面的实现方法,在SQL Server2008中试了一下, ...
- PHP 练习题
Php基础知识测试题 本试题共40道选择题,10道判断题,考试时间1个半小时 一:选择题(单项选择,每题2分): 1． LAMP具体结构不包含下面哪种(A ) A:Windows系统 B:Apache ...
- iOS-APP提交上架流程（新手必看！2016年3月1日最新版）
自己的经验总结,有错的话请留言,第一时间更改. 先大概说一下iOSAPP上架的几个步骤(详细步骤见下图): 创建证书请求文件 登录苹果开发者中心生成发布者证书(下载下来要双击一下) 设置APPID(要 ...
- thinkphp导入导出excel表单数据
在PHP项目经常要导入导出Excel表单. 先去下载PHPExcel类库文件,放到相应位置. 我在thinkphp框架中的位置为ThinkPHP/Library/Org/Util/ 导入 在页面上传e ...
- 安天AVL联合小米MIUI首擒顽固病毒“不死鸟”
不死鸟作为希腊神话中的一种怪物,拥有不断再生的能力,每当寿限将至时,它会在巢穴中自焚,并在三天后重新复活.就在近期,安天AVL移动安全团队和小米MIUI安全中心发现了病毒界的“不死鸟”,其顽固程度之深 ...
- PyQt5+Python3.5.2-32bit开发环境搭建
1.基本环境. Window 8.1 64bit Python3.5.2-32bit.exe PyQt5 2.安装python. 去官网下载32位版本的python3.5.2(就是x86那个) 备 ...