javascript - Knockout绑定(bind)错误，无法在iFrame内绑定(bind)viewModel

Question

我正在尝试绑定(bind) knockout 模板，但无法解决问题，我已经尝试过一百万种方法。

现在我对任何想法都迷失了，我几天来一直在调试它。

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

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

我收到一个未捕获的类型错误:无法处理绑定(bind)“with: function (){return selectedView }”消息:无法处理绑定(bind)“template: function (){return {name:templateName,data:data} }”基本上是从那里开始的一系列错误，因为模板没有绑定(bind)。这是一些 View 代码:

#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 对象之外，不绑定(bind)或输出页面上的任何内容，该对象为我提供了所有数据的 JSON。想知道为什么当我看到数据存在时数据没有被绑定(bind)。

谁能帮我调试这个？

谢谢

Answer 1

Knockout 支持跨窗口绑定(bind)(在窗口之间共享 View 模型)，但它不直接支持在窗口之间共享模板。 (您可能可以编写自定义 templateEngine ，但这非常高级。)

我想出了一个应用模板并绑定(bind) <iframe> 的绑定(bind)。我认为它会做你想做的事。

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/