This is a migrated thread and some comments may be shown as answers.

Embed/Iframe/Object and SPA

1 Answer 358 Views

MVVM

This is a migrated thread and some comments may be shown as answers.

Erik asked on 29 Dec 2015, 02:17 PM

wef.png

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

20. });

21.

22. left_layout = new kendo.Layout("lefter", {

23. model: obs_leftSide,

24. wrap: false

25. });

26.

27. right_layout = new kendo.Layout("viewer", {

28. model: obs_rightSide,

29. wrap: false

30. });

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

Accepted