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

Question

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

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

除了http://jsfiddle.net/NnT78/66/ 的第一个 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);

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

我想这样做的原因是我在加载到页面上的异步内容中有链接，并且需要在加载 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);
        }
    });
}