1

我一直在为 KendoUI/Knockout 集成而苦苦挣扎。

我的要求：

  1. 有两个 KendoUI DatePicker 元素（开始日期和结束日期）。结束日期应该是只读的并且应该是一个计算值
  2. 用于捕获月份值的 KendoUI NumericTextBox 元素（Period）
  3. 插入 NumericTextBox 值时，应自动添加到结束日期的月份值

我的尝试（请忽略表格的使用）：

HTML

<table>
    <tr>
        <td>Start Date:</td>
        <td>
            <input name="StartDate" id="StartDate" data-bind="kendoDatePicker: eventStartDate" />
        </td>
    </tr>
    <tr>
        <td>End Date:</td>
        <td>
            <input name="EndDate" id="EndDate" data-bind="kendoDatePicker: computedEndDate" />
        </td>
    </tr>
    <tr>
        <td>Event Period(months) :</td>
        <td>
            <input id="EventtPeriod" name="EventPeriod" data-bind="kendoNumericTextBox: eventPeriod" />
        </td>
    </tr>
</table>

JavaScript/ViewModel（我的功能失调的代码被注释掉了）：

    var ViewModel = function () {
        var now = new Date();

        this.eventStartDate = ko.observable(now);
        this.eventPeriod = ko.observable();
        this.computedEndDate = ko.observable( );

        /* //DOES NOT WORK
        this.computedEndDate = ko.computed(function () {
            var start = $('#StartDate').data('kendoDatePicker').value();
            var period = $('#EndDate').data('kendoNumericTextBox').value()
            var end = $('#EndDate').data('kendoDatePicker')
            end.value.setMonth(start.getMonth() + period);
            //var eventPe
            //return end;
        });
        */
    };

var vm = new ViewModel();
ko.applyBindings(vm);

JSFiddle：http: //jsfiddle.net/user919426/JkgY6/4/

4

2 回答 2

2

因为您使用的是 Knockout，所以无需手动从控件中获取值，您可以使用 viewmodel 中显示的值来计算结束日期：

this.computedEndDate = ko.computed(function () {
    var period = this.eventPeriod();
    var newMonth = this.eventStartDate().getMonth() + period;
    var endDate = new Date(this.eventStartDate());
    endDate.setMonth(newMonth);
    return endDate;
}, this);

演示JSFiddle。

无论如何，您的原始方法将不起作用，因为 KO 更改跟踪仅适用于可观察对象，因此当您更改输入时，您的原始计算不会得到更新。

为了也触发更改，KO-Kendo 不支持开箱即用的微调按钮。但是，您可以重新创建kendoNumericTextBox也可以侦听spin事件的：

演示JSFiddle。

于 2014-03-19T10:05:00.920 回答
0

@nemesv 的解决方案非常有效。如果您还可以节省您的见解@nemesv，那将是最有帮助的。但我也试图在不“重新创建 NumericTextBox”的情况下绑定到事件，因此我们可以重用相同的逻辑。

它在某种程度上有效，但随着我增加月份，年份似乎也在增加。它似乎乘以或添加到 EndDate 而不是 StartDate。或者我错过了什么？？？

$('#EventtPeriod').ready( function() {
var eventPeriod = $("#EventPeriod").data("kendoNumericTextBox");

    eventPeriod.bind("spin", function() {

    var startControl = $('#StartDate').data('kendoDatePicker');
    //var endControl = $('#EndDate').data('kendoDatePicker');    
    var value = this.value();
    var startDate = startControl.value(); 

    startDate.setMonth(startDate.getMonth() + value);   

    $('#EndDate').data('kendoDatePicker').value(startDate);

});

});

JSFiddle http://jsfiddle.net/user919426/AtJCL/4/

于 2014-03-19T14:28:29.020 回答