剑道击倒:如何将窗口居中 [英] Kendo-Knockout: How to center window

问题描述

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

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

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

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

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

解决方案

widget 参数旨在在您需要以所提供的不支持的方式与小部件交互时使用绑定选项.通常，这是最后的手段，但在这种情况下，它看起来是正确的选择.

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

类似于:

var ViewModel = function() {this.isOpen = ko.observable(false);//如果打开则居中this.isOpen.subscribe(function(newValue) {如果(新值){this.myWidget().center();}}， 这);//保持小部件this.myWidget = ko.observable();};

然后，在标记中:

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

此处示例:http://jsfiddle.net/rniemeyer/gNgDm/

I am using RPNiemeyer`s kendo-knockout library. I have a kendo window which I use like this in the html:

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

I used to center the dialog like this:

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

But as center is a method I cannot pass it in the markup like this center: true. In the kendo-knockout documentation there is a property widget for some of the widgets and my guess is that this is the key but I am not sure how to use it as there are no examples. Any ideas will be welcome. Thanks!

解决方案

The widget parameter is intended to be used when you need to interact with a widget in a way that is not supported by the provided binding options. Normally, this is kind of a last resort, but in this case it looks like it would be the right choice.

What you do is pass an observable into the widget parameter and it will get filled with the actual widget. Then, you can call methods off of it from your view model.

Something like:

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();
};

Then, in markup:

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

Sample here: http://jsfiddle.net/rniemeyer/gNgDm/

这篇关于剑道击倒:如何将窗口居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！