kendoDatePicker 淘汰赛绑定不起作用答案

【问题标题】：kendoDatePicker knockout binding not workingkendoDatePicker 淘汰赛绑定不起作用
【发布时间】：2015-12-27 06:23:34
【问题描述】：

我正在尝试从我的视图模型中绑定 kendoDatePicker 值。

当我使用一个简单的 observable 时，它工作得很好。 html:

<input data-bind="kendoDatePicker: { value: myDate().selectedDate} " />

更改日期

var DateModel = function (json) {
            var self = this;

self.selectedDate = ko.observable((!json || !json.Value) ? new Date('01/02/2015') : new Date(json.Value));

};


function ViewModel() {
    var self = this;

    // initializing  my object with empty string to avoid html databinding exceptions
    self.myDate= ko.observable(new DateModel(''));

    self.changeDate = function () {

    self.myDate(new DateModel({Value:"09/08/1935"}));
    };

    return self;
};

ko.applyBindings(new ViewModel());

<!-- REFERENCES
    http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css
    http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css 
    http://cdn.kendostatic.com/2012.3.1315/js/kendo.core.min.js
    http://cdn.kendostatic.com/2012.3.1315/js/kendo.web.min.js
    http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js
    http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js
-->


<input data-bind="kendoDatePicker: { value: myDate().selectedDate} " />

 <button data-bind="click: changeDate">Change Date</button>
    <p data-bind="text: myDate().selectedDate">  </p>

演示：http://jsfiddle.net/NGLEp/27/

但是当我使用带有 json 值的可观察模型时（比如我正在解析我的网络服务结果），它就不起作用了。

var DateModel = function (json) {
            var self = this;

self.selectedDate = ko.observable((!json || !json.Value) ? new Date('01/02/2015') : new Date(json.Value));

};


function ViewModel() {
    var self = this;

    // initializing  my object with empty string to avoid html databinding exceptions
    self.myDate= ko.observable(new DateModel(''));

    self.changeDate = function () {

    self.myDate().selectedDate(new Date());
    };

    return self;
};

ko.applyBindings(new ViewModel());

<!-- REFERENCES
    http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css
    http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css 
    http://cdn.kendostatic.com/2012.3.1315/js/kendo.core.min.js
    http://cdn.kendostatic.com/2012.3.1315/js/kendo.web.min.js
    http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js
    http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js
-->


<input data-bind="kendoDatePicker: { value: myDate().selectedDate} " />

 <button data-bind="click: changeDate">Change Date</button>
    <p data-bind="text: myDate().selectedDate">  </p>

演示：http://jsfiddle.net/NGLEp/26/

请帮忙！

【问题讨论】：

标签： knockout.js data-binding durandal kendo-datepicker

【解决方案1】：

这个

self.myDate(new DateModel({Value:"09/08/1935"}));

覆盖绑定到 datePicker 控件的 selectedDate 的旧实例。您可以使用setter 方法来设置最初绑定的 observable 的值。

self.setDate = function(json){
    self.selectedDate((!json || !json.Value) ? new Date('01/02/2015') : new Date(json.Value));
};

JsFiddle：http://jsfiddle.net/newuserjs/NGLEp/28/

【讨论】：