Jak powiązać dane dla elementu iframe za pomocą KnockoutJS?

Czy każdy może mi powiedzieć, jak powiązać dane z iframe przy użyciu funkcji Knockout? Starałem się to zrobić jak poniżej, ale to nie działa zgodnie z oczekiwaniami:Jak powiązać dane dla elementu iframe za pomocą KnockoutJS?

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

i JavaScript:

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

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

Chcę dodać tekst "Hello Content" w iframe. Czy ktoś może mi w tym pomóc?

Źródło

2013-03-20 Meena A

EDIT: Fiddle Updated.

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

Musisz utworzyć niestandardowy wiążącej obsługi dla tego produktu. Użyłem jednego z nich przez http://jsfiddle.net/mbest/GYRUX/

i zmieniono go tak, aby odpowiadał Twoim potrzebom. Przyjrzyj się obu i sprawdź, co działa zgodnie z Twoimi potrzebami.

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); 
    } 
};

Źródło

2013-03-20 13:45:22

'initChildFrame' nie jest zdefiniowany jako część nokautu. –

jest w bloku catch catch. initChildFrame nie jest metodą nokautu. Jest to metoda przeglądarki, która je obsługuje. najłatwiejszy sposób sprawdzenia, z którą przeglądarką mam do czynienia, aby mój bindingHandler mógł działać tak samo. Właśnie dlatego druga kontrola, czy iframeInit jest zdefiniowana. –

Mam cię, dziękuję za wyjaśnienie. –

Możesz mieć kod jak to działa całkowicie w porządku: -

// 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());

LUB

<!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>

Źródło

2013-03-20 20:26:09 Shubh

Oto nieco inaczej (bardziej podstawowe) rozwiązanie do wykorzystania. Pozwala to na obserwację z całą strukturą HTML i wypełnienie iFrame tymi danymi. Po zaktualizowaniu HTML iframe jest na bieżąco z nowej wersji:

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>") 
});

Można to wykorzystać jak to w widoku:

<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>

Zobacz this jsfiddle na demo. The valueUpdate jest tylko tam, więc demo jest bardziej przejrzyste, jest dyskusyjne, jeśli jest to dobry pomysł w większych scenariuszach.

Źródło

2014-10-03 08:25:36 Jeroen

Krótki, słodki i doskonały. –

Jak powiązać dane dla elementu iframe za pomocą KnockoutJS?

Odpowiedz

Powiązane problemy