Kendo-Knockout：如何使窗口居中答案

【问题标题】：Kendo-Knockout: How to center windowKendo-Knockout：如何使窗口居中
【发布时间】：2012-12-03 05:19:41
【问题描述】：

我正在使用 RPNiemeyer 的 kendo-knockout 库。我有一个剑道窗口，我在 html 中这样使用：

<div data-bind="kendoWindow: { isOpen: isOpen, title:'States', width: 600, height: 150, modal: true, resizable: false, actions: ['Maximize', 'Close'] }" > </div>

我曾经像这样将对话框居中：

$('#productionStates').data("kendoWindow").center();

但由于center 是一种方法，我不能像center: true 这样在标记中传递它。在 kendo-knockout 文档中，有一些小部件的属性小部件，我猜这是关键，但我不确定如何使用它，因为没有示例。欢迎任何想法。谢谢！

【问题讨论】：

标签： knockout.js kendo-ui

【解决方案1】：

widget 参数旨在用于当您需要以提供的绑定选项不支持的方式与小部件进行交互时。通常，这是最后的手段，但在这种情况下，它似乎是正确的选择。

你所做的是将一个 observable 传递给 widget 参数，它将被实际的小部件填充。然后，您可以从视图模型中调用方法。

类似：

var ViewModel = function() {
   this.isOpen = ko.observable(false);
   //center it if it is opened
   this.isOpen.subscribe(function(newValue) {
       if (newValue) {
           this.myWidget().center();         
       }
   }, this);

   //hold the widget
   this.myWidget = ko.observable();
};

然后，在标记中：

<div data-bind="kendoWindow: { isOpen: isOpen, visible: false, modal: true, widget: myWidget }">
     ...
</div>

示例：http://jsfiddle.net/rniemeyer/gNgDm/

【讨论】：

谢谢！您是否打算将此功能作为布尔属性添加到您的库中？以我的经验，每次我需要一个模态窗口时，它都需要居中。为什么总是写逻辑来调用方法来显式这样做？
这有点挑战性，因为没有 center / uncenter 的概念，也没有事件可以知道窗口是不再居中（将其设置为 false）还是现在居中（以设置为真）。看起来它确实应该是 Kendo UI 支持的配置选项。我将不得不考虑更多，但它并不完全符合正常的“绑定”模式。不过，我当然可以看到它会更方便。

【解决方案2】：

我实际上是通过将其粘贴在绑定处理程序中来实现与 Niemeyer 相同的效果：

ko.bindingHandlers.kendoWindow.options = { 打开：function () { this.element.data('kendoWindow').center(); } };

不需要额外的绑定，但它会占用您的“onOpen”事件。

【讨论】：