Kendo-Knockout:如何居中窗口

时间:2012-12-15 11:16:28

标签: knockout.js kendo-ui

我正在使用RPNiemeyer的kendo-knockout库。我有一个kendo窗口,我在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文档中,有一些小部件的属性小部件,我的猜测是这是关键,但我不知道如何使用它,因为没有例子。任何想法都将受到欢迎。谢谢!

2 个答案:

答案 0 :(得分:7)

当您需要以提供的绑定选项不支持的方式与窗口小部件交互时,将使用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/

答案 1 :(得分:6)

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

 

    ko.bindingHandlers.kendoWindow.options = {
        open: function () { this.element.data('kendoWindow').center(); }
    };

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