• Knockout自定义绑定数据逻辑


    //定义绑定,http://knockoutjs.com/documentation/custom-bindings.html
    ko.bindingHandlers.[CustomLogic]={
        init:function(element,valueAccessor,allBindings,viewModel,bindingContext){}
        update:functing(element,valueAccessor,allBindings,viewModel,bindingContext){}
    } 
    //element: 调用绑定的dom元素;
    //valueAccessor : 值访问者,可以获取到当前绑定的值;
    //allBindings : 元素所有的绑定,可以获取到当前对象所有注册的绑定;
    //viewModel : Model对象,可以获取到当前对象model的所有值;
    //bindingContext : 上下文对象,$data、$index、$parent、$parentContext、$parents、$rawData、$root、$ko
    <!--使用绑定-->
    <div data-bind="yourBindingName: someValue"> </div>
    var ko = require("knockout");
    var komap = require("/scripts/plugins/knockout/knockout.mapping.js");
    _viewListModel = komap.fromJS(data);

    ko.bindingHandlers.datePicker = {
         init:
    function (element, valueAccessor, allBindingsAccessor, viewModel) {

             //注册监听值改变事件
             ko.utils.registerEventHandler(element,
    "change", function () {
                 
    var value = valueAccessor();

                  //转换
                 
    var string = "/Date(" + moment(element.value, "YYYY-MM-DD HH:mm").valueOf() + "+0800)/";

                  //转换后的值给原model
                  value(string);
               });
         },
        
    // Update the control whenever the view model changes
         update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                var value = valueAccessor();
                element.value
    = moment(value()).format("YYYY-MM-DD HH:mm");
         }
    };

    //绑定视图数据

    ko.applyBindings({ lists: _viewListModel }, document.getElementById("listBody"));

    <input type="text" data-bind="datePicker: EndDateTime" />
  • 相关阅读:
    int (*p)[10] 与*p[10]的区别
    运算顺序
    关于linux开机进入grub问题的解决方法
    对于特殊字符串的处理方法
    学习进度条
    阅读《实例化需求》4-6章有感
    学习进度条
    阅读《实例化需求》1-3章有感
    问题账户需求分析
    2016年秋季个人阅读计划
  • 原文地址:https://www.cnblogs.com/qiumc/p/5984723.html
Copyright © 2020-2023  润新知