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