Kendo TimePicker MVVM 绑定到 OData 结果

Question

我有一个来自绑定到表单的 odata 端点的模型，唯一不会玩球的控件是时间选择器...

这里是初始化代码：

my.api.get("odata url", function (res) {
   var model = new kendo.observable(res);
   var component = $("#editor");
   kendo.bind(component, model);
   $("#editor").data("model", model);
});

下面是一个有效的日期选择器字段标记示例，格式为：

<li class="Field">
            <label for=""> End</label>
            <div class="value">
<span class="k-widget k-datepicker k-header k-input"><span class="k-picker-wrap k-state-default"><input class="k-input" data-bind="value: End" data-format="dd MMM yyyy" data-role="datepicker" data-val="true" data-val-required="The End field is required." id="End" name="End" type="text" value="2020-11-17" style="width: 100%;" role="combobox" aria-expanded="false" aria-owns="End_dateview" aria-disabled="false" aria-readonly="false"><span unselectable="on" class="k-select" role="button" aria-controls="End_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>
<span class="field-validation-valid" data-valmsg-for="End" data-valmsg-replace="true"></span>
            </div>
        </li>

这是我损坏的时间选择器字段之一：

<li class="Field">
            <label for="Default_Calculation_Time">Default Calculation Time</label>
            <div class="value">

<span class="k-widget k-timepicker k-header k-input"><span class="k-picker-wrap k-state-default"><input class="k-input" data-bind="value: AutoCalculationTime" data-format="hh:mm tt" data-role="timepicker" data-val="true" data-val-required="The Default Calculation Time field is required." id="AutoCalculationTime" name="AutoCalculationTime" type="text" value="02:30 PM" role="combobox" aria-expanded="false" aria-owns="AutoCalculationTime_timeview" aria-disabled="false" aria-readonly="false" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="AutoCalculationTime_timeview"><span unselectable="on" class="k-icon k-i-clock">select</span></span></span></span>
<span class="field-validation-valid" data-valmsg-for="AutoCalculationTime" data-valmsg-replace="true"></span>

            </div>
        </li>

以上两个字段都绑定到来自 OData 端点的 UTC 格式的 DateTimeOffsets。

这是我的表单绑定到的模型对象的示例（上面 js 代码中的模型）：

{
  @odata.context: "https://apitest.corporatelinx.com/ACOFI/$metadata#Programme/$entity"
  AutoCalculationTime: "2000-01-01T14:30:00Z"
  AutoCutoffTime: "2000-01-01T14:00:00Z"
  Description: "ACOFI DEMO Buyer Programme"
  End: "2020-11-17T18:22:46.953Z"
  FundCount: 3
  Id: 3
  Name: "ACOFI Demo Programme"
  Start: "2015-11-17T18:22:46.953Z"
  _events: Object
  uid: "28dd1327-ed4a-4b24-9418-8b86d143acd7"
  __proto__: i
}

所以我的问题是......需要执行什么黑魔法才能让 Kendo TimePicker 控件像其他控件一样工作？

Answer 1

好的，我明白了...

原来 kendo 时间选择器不能绑定到 UTC datetimeoffset 字符串但是如果我在绑定之前将它们解析为 javascript 日期对象然后正常绑定 kendo 可以解决这个问题.

我觉得代码味道不好...IMO 我认为 telerik 至少应该自动处理 UTC 通用字符串以及日期对象，但这不是世界末日，只是意味着我必须 "pre-process" 我的模型数据，然后将其提供给 kendo。

是的，又是Kendo主义生活中的一天！

Kendo TimePicker MVVM 绑定到 OData 结果

Kendo TimePicker MVVM binding to OData Result

javascript

mvvm

odata

kendo-ui

kendo-timepicker