Durandal Modal 弹出窗口中的 Kendo DatePicker

Question

当我开始开发页面时，我有一个在 div 上完美运行的 Kendo Datepicker。

在我完成所有设置并按照预期的方式工作后，我按照要求将日期选择器移动到了 Durandal 模式。模式工作正常，其他数据绑定正在模式上工作，但不是日期选择器。

我尝试在 Durandal 生命周期的不同时间加载日期选择器，例如激活、compositionComplete 和 attach，以及将 Z 索引更改为 20000。我不太了解我可能缺少的内容。

这是最新的相关代码：

 define([
     'durandal/app',
     'plugins/router',
     'plugins/dialog',
     'services/datacontext',
     'services/dialogs',
     'viewmodels/helpers/vc',
     'services/logger',
     'services/settings'
 ],
 function (app, router, dialog, datacontext, dialogs, vc, logger, settings) {
  var featureSetToEdit;
  var startFeaturesDatePicker = null;
  var endFeaturesDatePicker = null;
  var today = new Date();
  var featList = ko.observableArray(['']);
  var saving = ko.observable(false);
  var isUserInReadOnlyRole = ko.observable(true);

  function attached() {
     loadDatePickers();
  };

  function compositionComplete() {
     isUserInReadOnlyRole(vc.isUserReadOnly(datacontext.userRole));
  };

  function loadDatePickers() {
     startFeaturesDatePicker = $("#startDateFeatureSet").kendoDatePicker({
        value: today,
        format: 'dd-MMM-yyyy',
        change: setStartDate,
     }).data('kendoDatePicker');
     endFeaturesDatePicker = $("#endDateFeatureSet").kendoDatePicker({
        value: today,
        format: 'dd-MMM-yyyy',
        change: setEndDate,
     }).data('kendoDatePicker');
  };

  var setStartDate = function () {
     startFeaturesDatePicker.value($("#startDateFeatureSet").val());
  };

  var setEndDate = function () {
     endFeaturesDatePicker.value($("#endDateFeatureSet").val());
  };

  function checkboxDivId(featuresKey) {
     return 'checkboxDivId' + featuresKey;
  };

  function edit(featureSetToEdit, fList) {
     self = this;
     self.featList(fList);
     return dialog.show(self);
  };

  function save() {

  };

  function cancel() {
     dialogs.confirmYesNo('Discard changes to this feature Set?', 'Confirm cancel',
        function () {
           dialog.close(self, false);
        },
        function () {
           return;
        }
     );
  };

  // Definition of viewmodel (list of exposed properties and methods)
  var vm = {
     featList: featList,
     edit: edit,
     save: save,
     saving: saving,
     cancel: cancel,
     isUserInReadOnlyRole: isUserInReadOnlyRole,
     checkboxDivId: checkboxDivId
  };
  return vm;
});

HTML

<div class="messageBox autoclose" style="min-height: 330px" >
<div class="modal-header">
  <h3>Edit Feature Set</h3>

</div>
<div class="modal-body" style="padding: 2px 5px 2px 5px; background-color: #ddd; min-height: 250px; width: 400px; border: 1px solid silver;">
  <table class="k-grid">
     <tr class="dataRow" style="padding: 2px;">
        <td><span>Start Date</span></td>
        <td><input id="startDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
     </tr>
     <tr class="dataRow" style="padding: 2px;">
        <td><span>End Date</span></td>
        <td><input id="endDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
     </tr>
     <tr class="dataRow" style="padding: 2px;">
        <td><span>Features</span></td>
        <td id="featuresCheckbox" style="font-size: 10pt; text-align: left" data-bind="foreach: featList">
           <input data-bind="attr: { id: $parent.checkboxDivId($data.keyChar), value: $data.keyChar }" type="checkbox" style="margin-bottom:6px;" />&nbsp;<span data-bind="text: $data.name" style="margin-top:6px;"></span> <br />
        </td>
     </tr>
  </table>


</div>
<div class="modal-footer">
  <div style="float: right">
     <span class="icon-spin icon-spinner waiting" data-bind="visible: saving">  </span>&nbsp;&nbsp;
     <button class="btn btn-primary" data-bind="click: save, enable: !saving() && !isUserInReadOnlyRole()">Save</button>
     <button class="btn btn-default" data-bind="click: cancel, enable: !saving()">Cancel</button>
  </div>
</div>
</div>

你能看一下，让我知道我可能缺少什么吗？

Answer 1

所以在发现我仍然需要通过通常的剑道初始化来加载它之后，我搜索了更多，直到我发现要正确加载它我需要在模态 js 页面中添加以下代码：

self = this;
self.compositionComplete = function () {
    loadDatePickers();
};

return dialog.show(self);

现在它的工作方式与非模式页面上的日期选择器完全相同。 我希望这对其他人有所帮助！