Question

我在Knockoutjs: bind dynamic iframes in foreach to parent遇到了类似的问题，得到了答案，但现在我试图进一步采用这个示例，使用ajax调用并在其中一个iframe中加载异步内容...

我正在尝试绑定动态输出iframe和父窗口，以便我可以在iframe或父窗口中更改/更新可观察或可观察的数组，并且两个视图都将使用新值进行更新。

之外的第一个iframe以外的所有iframe

这是我的代码

HTML：

<iframe data-bind="attr: {src: src, 'data-asyncload': async}, bindIframe: $root"></iframe>

KnockoutJS：

ko.bindingHandlers.bindIframe = {
    update: function (element, valueAccessor) {
            function bindIframe() {
                try {
                    var iframeInit = element.contentWindow.initChildFrame,
                        iframedoc = element.contentDocument.body;
                } catch (e) {
                    // ignored
                }
                var val = valueAccessor();
                if (iframeInit)
                    iframeInit(ko, valueAccessor());
                else if (iframedoc) {
                    ko.applyBindings(valueAccessor(), iframedoc);
                }
            };

            if($(element).data("asyncload") == false) {
                bindIframe();
                ko.utils.registerEventHandler(element, 'load', bindIframe);
            }
        }
};

第一个iframe会有一个异步调用，会在上面的原始绑定之后加载内容，这就是为什么我跳过将上面的iframe绑定到：

if($(element).data("asyncload") == false) {

绑定第一个iframe（在异步调用完成并从数据源加载内容之后）我想调用一个函数来绑定特定的iframe：

function bindAsyncOnLoadCallback() {
    $("iframe[data-asyncload='true']").each(function() {
    try {
        var iframeInit = this.contentWindow.initChildFrame,
            iframedoc = this.contentDocument.body;
    } catch (e) {
        // ignored
    }
    if (iframeInit)
        iframeInit(ko, new ViewModel());
    else if (iframedoc) {
        ko.applyBindings(new ViewModel(), iframedoc);
    }
});
};

bindAsyncOnLoadCallback（）中的绑定似乎没有绑定到父窗口，我想我这行已经错了？

ko.applyBindings(new ViewModel(), iframedoc);

您可以看到所有iframe的工作示例，但第一个iframe绑定到http://jsfiddle.net/NnT78/66/上的父窗口

我想这样做的原因是我在异步内容中有链接加载到页面上，需要在加载ajax内容后应用绑定

提前致谢!!

Answer 1

我得到了这个工作！以下是工作示例：http://jsfiddle.net/myq8e/48/

问题是我必须在变量中全局声明ViewModel()，以便我可以在异步回调函数中使用它：

var viewModel = new ViewModel();

然后在为父窗口应用绑定时使用viewModel：

ko.applyBindings(viewModel);

对于异步iframe：

function bindAsyncOnLoadCallback() {
    $("iframe[data-asyncload='true']").each(function() {
        try {
            var iframeInit = this.contentWindow.initChildFrame,
                iframedoc = this.contentDocument.body;
        } catch (e) {
            // ignored
        }
        if (iframeInit)
            iframeInit(ko, viewModel);
        else if (iframedoc) {
            ko.applyBindings(viewModel, iframedoc);
        }
    });
}

Knockoutjs：将foreach中的特定动态iframe手动绑定到父级

1 个答案: