【问题标题】:Kendo-Knockout: widget observable is not filled with the actual widgetKendo-Knockout:可观察的小部件未填充实际的小部件
【发布时间】:2013-01-08 10:51:01
【问题描述】:

我正在使用 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-Knockout: Window does not close correctly

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

Kendo-Knockout: How to center window

我正在定义可观察的小部件,但是当我想使用它时,它并没有填充实际的小部件。

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

任何有关工作示例的帮助将不胜感激。

【问题讨论】:

    标签: javascript knockout.js kendo-ui


    【解决方案1】:

    看起来有几个问题:

    首先,您的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 之后清除 observable。这是一个示例:http://jsfiddle.net/rniemeyer/PVMjy/。我还订阅了小部件的 observable 本身,因此上面提到的isOpen 不存在时间问题。

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

    【讨论】:

    • 再次感谢您的反馈。我将使用第一个场景,因为我只需要小部件引用来使窗口居中。随着我的项目变得更大和更复杂,我遇到了一些极端情况,这些情况并不完全被这个很棒的库所支持。由于我的应用程序完全依赖于您的库,并且您似乎是唯一可以根据我的经验回答我的问题的人,因此是否有其他方式可以联系您?
    • 你可以给我发邮件到 ryan at knockmeout.net
    • 我已经向您发送了一封电子邮件,其中包含图书馆中可能存在的问题。谢谢!
    猜你喜欢
    • 1970-01-01
    • 2021-11-13
    • 2020-07-06
    • 2012-12-19
    • 2015-06-06
    • 2020-05-24
    • 1970-01-01
    • 2011-04-07
    相关资源
    最近更新 更多