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" />

转载于:https://www.cnblogs.com/qiumc/p/5984723.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值