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>