Kendo-Knockout:可观察的窗口小部件未填充实际的窗口小部件 [英] Kendo-Knockout: widget observable is not filled with the actual widget

问题描述

我正在使用RPNiemeyer的kendo-knockout库.我有一个剑道窗口:

HTML:

<div data-bind="kendoWindow: {isOpen: isOpen, title:'Language', width: 400, height: 200, modal: true, widget: popUpWindow }" > 

使窗口居中的JavaScript部分:

this.popUpWindow = ko.observable();
    self.isOpen.subscribe(function (newValue) {
        if (newValue) {
            self.popUpWindow().center();
        }
    });

我正在使用上一个问题中的源代码来摆弄我的小提琴:

Kendo淘汰:窗口无法正确关闭

我正在按照此处显示的步骤进行操作:

Kendo-Knockout:如何将窗口居中

我正在定义可观察的窗口小部件，但是当我要使用它时，它并没有填充实际的窗口小部件.

提琴: http://jsfiddle.net/dcYRM/15/

在工作示例方面的任何帮助将不胜感激.

解决方案

好像有几个问题:

首先，您的isOpen订阅正在运行，而小部件已被填充.

第二，在填充窗口小部件之后，这将导致刷新数据源，并尝试序列化包括窗口小部件的模型，这会引起问题.最终，这是因为Knockout-Kendo在展开传递到网格的数据时过于激进.

我看到两种非常简单的方法来解决此问题.最简单的方法是为窗口小部件的open事件设置全局处理程序，并在其上调用中心.

使用上一个问题中的close事件将其放入，类似于:

  ko.bindingHandlers.kendoWindow.options = {
    close: function() {
      $('.k-window, .k-overlay').remove();
    },
    open: function(event) {
       event.sender.center();
    }
  };

现在，无论何时打开任何窗口，它都将居中，而您根本不需要弄乱窗口小部件.此处的示例: http://jsfiddle.net/rniemeyer/F4JGG/

这似乎是最好的选择.要使其与对窗口小部件本身的引用一起使用，您将需要解决库中的问题.如上所述，这有点过于激进，无法展开选项，并且在初始化小部件，传递小部件参数并且已经用小部件填充时，这似乎会引起问题.如果有机会，我应该能够在图书馆中解决这个问题.

否则，您将必须这样做:

self.popUpWindow = ko.observable();
self.popUpWindow.subscribe(function (widget) {
  if (widget) {
    widget.center();
    self.popUpWindow(null); //hack - Knockout-Kendo should handle this one
  }
});

因此，在调用center之后清除其可观察对象.这是一个示例: http://jsfiddle.net/rniemeyer/PVMjy/.我还订阅了小部件的可观察自身，因此如上所述，isOpen不会出现计时问题.

在这种情况下，设置全局open处理程序似乎是最干净，最好的选择.

I am using RPNiemeyer`s kendo-knockout library. I have a kendo window:

HTML:

<div data-bind="kendoWindow: {isOpen: isOpen, title:'Language', width: 400, height: 200, modal: true, widget: popUpWindow }" > 

JavaScript part that centers the window:

this.popUpWindow = ko.observable();
    self.isOpen.subscribe(function (newValue) {
        if (newValue) {
            self.popUpWindow().center();
        }
    });

I am using the source code from my previous question for my fiddle:

Kendo-Knockout: Window does not close correctly

I am following the steps shown here:

Kendo-Knockout: How to center window

I am defining the widget observable but when I want to use it it is not filled with the actual widget.

Fiddle: http://jsfiddle.net/dcYRM/15/

Any help with working example will be greatly appreciated.

解决方案

Looks like there are a couple of issues:

First, your isOpen subscription is running before the widget has been filled.

Secondly, after filling the widget, it is causing the datasource to get refreshed and is trying to serialize the model including the widget, which is causing an issue. This is ultimately because Knockout-Kendo is a little too aggressive about unwrapping the data passed to the grid.

I see two pretty easy ways to fix the issue. The easiest way is to set up a global handler for the widget's open event and call center on it.

Putting this with the close event from a previous question would look something like:

  ko.bindingHandlers.kendoWindow.options = {
    close: function() {
      $('.k-window, .k-overlay').remove();
    },
    open: function(event) {
       event.sender.center();
    }
  };

Now, whenever any window is opened it will get centered and you don't need to mess with the widget at all. Sample here: http://jsfiddle.net/rniemeyer/F4JGG/

That looks like the best option. To make it work with the reference to the widget itself, you will need to workaround an issue in the library. As mentioned above, it is a little too aggressive and unwrapping the options and it appears that this causes an issue when a widget is initialized, the widget parameter is passed, and it is already filled with a widget. I should be able to address it in the library, when I get a chance.

Otherwise, you would have to do:

self.popUpWindow = ko.observable();
self.popUpWindow.subscribe(function (widget) {
  if (widget) {
    widget.center();
    self.popUpWindow(null); //hack - Knockout-Kendo should handle this one
  }
});

So, clear the observable after you called center on it. Here is a sample: http://jsfiddle.net/rniemeyer/PVMjy/. I also subscribed to the widget's observable itself, so that there is not the timing issue with isOpen as mentioned above.

Setting the global open handler, seems like the cleanest and best option in this case.

这篇关于Kendo-Knockout:可观察的窗口小部件未填充实际的窗口小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！