我的淘汰賽自定義綁定是不是雙向綁定

環境：

asp.net 3.5

我的日期是通過LIB使用ISO8601格式連載：Newtonsoft.json庫

目的：

創建2路在我的模型（Document.DocumentDate）和AJAX控件工具包日曆的延長文本日期字段之間的結合呃。 ajax日曆在後臺使用文本字段，因此我將下面的綁定應用於文本字段。加載頁面時，從對象到控件的綁定起作用，但在使用日曆擴展器更改文本字段後，文本值發生了更改，但我的基礎對象未更新，綁定中的update（）方法都不會被調用。

下面的代碼：

data-bind="date: {jsonDate : Document.DocumentDate }" 

ko.bindingHandlers.date = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var value = valueAccessor(); 
     var dtStr = ko.unwrap(value.jsonDate); 

     var dt = new Date(dtStr); 

     var ret = dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear(); 
     $(element).val(ret); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    } 
};

注：

如果我改變我的數據綁定表達式：

data-bind="value: Document.DocumentDate"

一切工作正常，但日期越來越呈現不是我的方式想在文字領域。這就是爲什麼我訴諸自定義綁定來格式化文本字段中的日期。

來源

2016-06-08 ActiveX

您可以使用extenter到日期格式（Knockout.js format date item）

或者你可以用「價值」與格式化功能爲可編輯的情況下結合：

// Formatted value accessor creator 
 

 
function createValueAccessor(dateValue) { 
 
    return function() { 
 
    return ko.computed({ 
 
    \t read: function() { 
 
     var dtStr = ko.unwrap(dateValue); 
 
     var dt = new Date(dtStr); 
 
     return dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear(); 
 
    \t }, 
 
     write: function(newValue) { dateValue(newValue); } 
 
    }); 
 
    } 
 
} 
 

 
// Binding handler 
 

 
ko.bindingHandlers.dateValue = { 
 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
 
     var value = valueAccessor(); 
 
     ko.bindingHandlers.value.init(element, createValueAccessor(value), allBindingsAccessor, viewModel); 
 
    }, 
 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
 
     var value = valueAccessor(); 
 
     ko.bindingHandlers.value.update(element, createValueAccessor(value), allBindingsAccessor, viewModel); 
 
    } 
 
}; 
 

 
// Sample part 
 

 
var viewModel = { date: ko.observable("1.1.15") }; 
 
viewModel.date.subscribe(function(newVal) { 
 
\t alert(newVal.toString()); 
 
}); 
 

 
ko.applyBindings(viewModel); 
 

 
setTimeout(function() { viewModel.date("12.12.15") }, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<input data-bind="dateValue: date" />

來源

2016-06-08 15:41:41 TSV

這是一個很好的解決方案。我現在用另一種解決方案，但會牢記這一點。 – ActiveX

@ActiveX - 好吧，沒問題 – TSV

這裏的工作解決方案：

datePicker: {{ jsonDate: Document.DocumentDate, format: 'dd-MMM-yyyy' }} 

    ko.bindingHandlers.datePicker = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     // Register change callbacks to update the model 
     // if the control changes.  
     ko.utils.registerEventHandler(element, "change", function() { 
      var value = valueAccessor(); 
      var dtStr = element.value; 
      var fmt = ko.unwrap(value.format); 

      var dt = Date.parseLocale(dtStr, fmt) 
      value.jsonDate(dt); 
     }); 
    }, 
    // Update the control whenever the view model changes 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var value = valueAccessor(); 
     var dtStr = ko.unwrap(value.jsonDate); 
     var fmt = ko.unwrap(value.format); 

     element.value = new Date(dtStr).localeFormat(fmt); 
    } 
};

基於職位： Using Knockout.js how do bind a Date property to a HTML5 date picker?

來源

2016-06-08 15:56:55 ActiveX

我的淘汰賽自定義綁定是不是雙向綁定

回答

相關問題