敲除绑定错误，无法在 iFrame 中绑定 viewModel

Question

我正在尝试绑定一个淘汰赛模板，但无法解决问题，我尝试过一百万种方法。

我现在对任何想法都很迷茫，我从几天以来一直在调试它。

在其他页面上也获取了相同的模板，并且工作正常。

我尝试打印 $data 对象，它显示数据可用，但是在同一个模板上它没有绑定 值。

我收到了Uncaught TypeError: Unable to process binding "with: function (){return selectedView }" Message: Unable to process binding "template: function (){return {name:templateName,data:data} }" 由于模板未绑定，因此基本上是一连串错误。 这是一些视图代码：

#page-hold{data: {role: 'page', theme: 'a'}}
  .container{ "data-bind" => "with: selectedView"}
    %div{ "data-bind" => "template : {name: templateName, data: data}" , data: {role: 'content'}}


%script{ "id" => "tpl_landing", "type" => "text/html"}

//html partials

数据对象如下所示

{
  "views": [
    {
      "title": "landing",
      "templateName": "tpl_landing",
      "data": {
        "base": {
        /// data
        }

最新更新：我对问题有了更深入的了解，经过更多调试后，我发现 viewModel($data object) 可以在 iframe 中访问，但确实如此除了 $data 对象之外，不要在页面上绑定或输出任何内容，这为我提供了所有数据的 JSON。想知道为什么当我看到它存在时数据没有被绑定。

谁能帮我调试一下？

谢谢

Answer 1

Knockout 支持跨窗口绑定（在窗口之间共享视图模型），但不直接支持在窗口之间共享模板。 （你可能会写一个自定义的templateEngine，但这已经很高级了。）

我想出了一个应用模板并绑定<iframe> 的绑定，我认为它可以满足您的需求。

ko.bindingHandlers.iframeTemplate = {
    update: function (element, valueAccessor) {
        var iframedoc = element.contentDocument,
            options = valueAccessor(),
            templateSource = ko.templateEngine.prototype.makeTemplateSource(ko.unwrap(options.template)),
            templateText = templateSource.text(),
            templateNodes = ko.utils.parseHtmlFragment(templateText, iframedoc),
            iframebody = iframedoc.body;

        ko.virtualElements.setDomNodeChildren(iframebody, templateNodes);
        ko.applyBindings(options.data, iframebody);
    }
};

使用示例：http://jsfiddle.net/mbest/udhm4qj4/