1

KendoUI/Knockout の統合に苦労しています。

私の要件:

  1. 2 つの 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 に答える