Wie bindet man Inhalte für einen iframe mit KnockoutJS?

Kann mir bitte jemand sagen, wie man mit Knockout Daten an einen iframe bindet? Ich habe versucht, diese, wie unten zu tun, aber es funktioniert nicht wie erwartet:Wie bindet man Inhalte für einen iframe mit KnockoutJS?

<iframe data-bind ="attr: { src: testcontent}"></iframe>

Und Javascript:

var ViewModel = function (content) { 
    this.testcontent = ko.observable(content); 
}; 

ko.applyBindings(new ViewModel("Hello World!!"));

ich den Text „Hallo Inhalt“ in die iframe hinzufügen möchten. Kann mir bitte jemand dabei helfen?

Quelle

2013-03-20 Meena A

BEARBEITEN: Fiddle Aktualisiert.

http://jsfiddle.net/sujesharukil/NnT78/10/

Sie benötigen eine benutzerdefinierte Bindung Handler für diese zu schaffen. Ich habe eine solche von http://jsfiddle.net/mbest/GYRUX/

verwendet und geändert, um Ihren Bedürfnissen zu entsprechen. Schauen Sie sich beide an und sehen Sie, was für Ihre Bedürfnisse funktioniert.

ko.bindingHandlers.bindIframe = { 
    init: function(element, valueAccessor) { 
     function bindIframe() { 
      try { 
       var iframeInit = element.contentWindow.initChildFrame, 
        iframedoc = element.contentDocument.body; 
      } catch(e) { 
       // ignored 
      } 
      if (iframeInit) 
       iframeInit(ko, valueAccessor()); 
      else if (iframedoc){ 
       var span = document.createElement('span'); 
       span.setAttribute('data-bind', 'text: someProperty'); 
       iframedoc.appendChild(span); 
       ko.applyBindings(valueAccessor(), iframedoc); 
      } 
     }; 
     bindIframe(); 
     ko.utils.registerEventHandler(element, 'load', bindIframe); 
    } 
};

Quelle

2013-03-20 13:45:22

'initChildFrame' ist nicht als Teil von knockout definiert. –

ist es in einem Versuch catch Block. initChildFrame ist keine Knockout-Methode. Es ist eine Browser-Methode, die es unterstützt. Der einfachste Weg zu überprüfen, mit welchem Browser ich mich beschäftige, damit mein bindingHandler gleich funktionieren kann. Das ist der Grund, warum die zweite Prüfung überprüft, ob iframeInit definiert ist. –

Gotcha, vielen Dank für die Klärung –

Sie den Code wie diese haben kann, arbeitet absolut in Ordnung: -

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI 
      function AppViewModel() { 
       this.externalUrl = ko.observable("http://www.w3schools.com"); 

      } 

      // Activates knockout.js 
      ko.applyBindings(new AppViewModel());

ODER

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test IFrame</title> 
    <script src="Scripts/jquery-1.7.1.js"></script> 

    <script src="Scripts/knockout-2.2.1.js"></script> 
    <script> 
     $(document).ready(function() { 
      // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI 
      function AppViewModel() { 
       this.externalUrl = "http://www.w3schools.com"; 

      } 

      // Activates knockout.js 
      ko.applyBindings(new AppViewModel()); 
     }); 

    </script> 
</head> 
<body> 
    <iframe class="iframe" id="iframe" style="width: 700px; height: 700px" data-bind="attr: { src: externalUrl }"></iframe> 

</body> 
</html>

Quelle

2013-03-20 20:26:09 Shubh

Hier ist eine etwas andere (basische) Lösung auf zu bauen. Es ermöglicht Ihnen, eine Observable mit einer vollständigen HTML-Struktur zu haben und den iFrame mit diesen Daten zu füllen. Wenn Sie die HTML aktualisieren, wird der iframe mit der neuen Version aktualisiert:

ko.bindingHandlers.iframeContent = { 
    update: function(element, valueAccessor) { 
     var value = ko.unwrap(valueAccessor()); 
     element.contentWindow.document.close(); // Clear the content 
     element.contentWindow.document.write(value); 
    } 
}; 

ko.applyBindings({ 
    myHtml: ko.observable("<html>\n<head><title>Test</title></head>\n<body>\n\nMy <em>fine</em> text.\n\n</body>\n</html>") 
});

Sie dies in Ihrer Ansicht wie diese verwenden:

<p>Edit your html:</p> 
<textarea data-bind="value: myHtml, valueUpdate: 'afterkeydown'"></textarea> 

<p>And see it appear in an iframe:</p> 
<iframe data-bind="iframeContent: myHtml"></iframe>

Siehe this jsfiddle für eine Demo. Die valueUpdate ist nur da, also ist die Demo klarer, es ist fraglich, ob das in größeren Szenarien eine gute Idee ist.

Quelle

2014-10-03 08:25:36 Jeroen

Kurz, süß und perfekt. –

Wie bindet man Inhalte für einen iframe mit KnockoutJS?

Antwort

Verwandte Themen