Problem:
During creating a pdf previewer for an application, kendo MVVM approach has presented a problem with rebinding embed/iframe/object elements. When the layout gets placed and values are bound the embed element calls the binded src value twice (one gets canceled, the other gets displayed). In chrome this behavior starts with first bind of the layout, while in ie11, this happens after binding the layout for the second time.
In case when working with views the requests are compounded and go up for additional request (first time twice, third time four times, then six...)
Is there a way to bypass that or do we have to approach it with a completely different angle?
For easier understanding of the problem I pasted sample code. In case my problem didn't come quite across: To see what I'm talking about check chrome developer tools (F12) and go to Network tab. Then click the Show pdf text a couple of times.
Javascript:
01.$(function () {02. var obs_global_layout = new kendo.observable({03. id_1: "",04. id_2: ""05. });06. 07. var obs_leftSide = new kendo.observable({08. show_pdf: function (e) {09. global_layout.showIn("#rightSide", right_layout);10. }11. });12. 13. var obs_rightSide = new kendo.observable({14. pdf_link: "http://www.telerik.com/docs/default-source/case-studies-documents/cbre_casestudy_2.pdf"15. });16. 17. global_layout = new kendo.Layout("layout", {18. model: obs_global_layout,19. wrap: false20. });21. 22. left_layout = new kendo.Layout("lefter", {23. model: obs_leftSide,24. wrap: false25. });26. 27. right_layout = new kendo.Layout("viewer", {28. model: obs_rightSide,29. wrap: false30. });31. 32. global_layout.render($("#wrapper"));33. global_layout.showIn("#leftSide", left_layout);34.});Html:
01.<!DOCTYPE html>02.<html>03.<head>04. <title></title>05. <meta charset="utf-8" />06. <script src="jQuery/jquery.min.js"></script>07. <script src="kendoUI/js/kendo.web.min.js"></script>08. <style>09. body, html {margin:0;padding:0;height:100%;}10. #wrapper, .embed {height:100%;}11. #leftSide {float:left;width:25%;height:100%;}12. #rightSide {float:left;width:75%;height:100%;}13. </style>14.</head>15.<body>16. <div id="wrapper">17. 18. </div>19. 20. <script type="kendo/template" id="layout">21. <div>22. <div id="leftSide">23. 24. </div>25. <div id="rightSide">26. 27. </div>28. </div>29. </script>30. 31. <script type="kendo/template" id="lefter">32. <div class="link">33. <span data-bind="click: show_pdf">Show pdf</span>34. </div>35. </script>36. 37. <script type="kendo/template" id="viewer">38. <div class="embed">39. <iframe width="100%" height="100%" data-bind="attr: {src: pdf_link}" />40. </div>41. </script>42. <script src="default.js"></script>43.</body>44.</html>1 Answer, 1 is accepted
Hello Erik,
I think I replicated the problem here. The problem comes from the "nature" of the iframe and the way the SPA views are implemented; They attach and detach from the DOM, and this causes the iframe to re-request the address each time. And the MVVM setter is responsible for the second request. I can't think of something to work around this, so my suggestion would be to approach the problem from a different angle.
Regards,
Petyo
Telerik