【问题标题】:Kendo-Knockout: Closing window breaks bindingsKendo-Knockout:关闭窗口会破坏绑定
【发布时间】:2012-12-15 02:50:43
【问题描述】:

我正在使用 RPNiemeyer 的 kendo-knockout 库。我有一个 onclick 实例化 javascript 对象的按钮,将 div 绑定到该对象并打开一个弹出窗口。当我从右上角的 x 按钮关闭窗口时(我没有导入图像并且在小提琴中没有正确显示它。),绑定被破坏并且按钮不会再次打开窗口。这是我的html:

<button onclick="openPopUp()">OpenPopUp</button>

<div id="productionStates" class="hidden">
    <div data-bind="kendoWindow: { isOpen: isOpen, title:'States', center:true, width: 600, height: 150, modal: true, resizable: false, actions: ['Maximize', 'Close'] }" >
        <fieldset>
            <legend>Change state:</legend>
            <table>
                <tr data-bind="foreach: productionStates">
                    <td><button class="k-button" data-bind="value: ProductionState, text: ProductionState" /></td>
                </tr>
            </table>
        </fieldset>
    </div>

</div>

javascript:

var ProductionStatesList = function() {
    var
        self = this;

    ProductionStatesList.prototype.productionStates =
        ko.observableArray([ { ProductionState: ko.observable("Pending") } ]);

        ProductionStatesList.prototype.openPopUp = function () {
            self.isOpen(true);
        };     

        ProductionStatesList.prototype.isOpen = ko.observable(false);
        ProductionStatesList.prototype.openPopUp = function () {
                    self.isOpen(true);                    
                };
        ProductionStatesList.prototype.close = function () {
            self.isOpen(false);
        }
};
    var elementIsBound = function (elementId) {
                return !!ko.dataFor(document.getElementById(elementId));
            };

    var openPopUp = function(){
        var productionStatesList = new ProductionStatesList();
        if (!elementIsBound("productionStates")){
            ko.applyBindings(productionStatesList, document.getElementById("productionStates"));
        }

        productionStatesList.openPopUp();
    }

这是 jsfiddle 中的代码: http://jsfiddle.net/5Zkyg/40/

重现步骤:

1.单击按钮。弹出窗口已打开。

2.从右上角的图片关闭窗口(x按钮不可视化,因为没有导入图片)。

请解释这不起作用的原因,任何解决方案将不胜感激。谢谢!

【问题讨论】:

    标签: knockout.js kendo-ui


    【解决方案1】:

    主要问题是随后对openPopup 的调用正在创建ProductionStatesList 的新实例并在其上调用openPopup,而元素绑定到原始实例。

    一种解决方案是在函数之外创建您的实例,例如:http://jsfiddle.net/rniemeyer/bZF9k/

    否则,如果您有一个 ProductionStatesList 实例数组并希望使用 Knockout 管理整个事情,那么您可能希望创建一个 selectedProductionStatesList 可观察对象并在窗口内的区域周围使用 with 绑定,这样每次都会反弹。

    【讨论】:

    • 不幸的是,第一个解决方案适用于我的情况。是否可以在小提琴中展示您的第二个提案的一些示例。谢谢。
    • 我重构了我的代码以在函数外部创建实例。问题是实例依赖于另一个对象,我曾经在实例的构造函数中传递该对象。所以现在我用空的构造函数初始化 ProductionStatesList 并以依赖对象作为参数显式调用初始化方法,每次我调用 openPopUp 函数。也许这不是最好的解决方案,但在这种情况下它对我来说是最好的,我现在就这样吧。再次感谢你!您的反馈是无价的。
    • 好的——如果还有什么东西还在工作,请告诉我或者把它搞定!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-03
    • 1970-01-01
    相关资源
    最近更新 更多