Remote reloaded and added to DOM on each visit

[Alex Smith]

*EDIT* The title should be "Remote view reloaded and added to DOM on each visit" but I can't edit the post title.

I am currently experiencing some dreadful behavior where each time I navigate to a remote view the entire contents are re-requested and added to the DOM. I am working on an app with several remote views and each time I transition from one to the other and back the state is lost because the entire contents are added to the DOM again (rather than just showing the view that was already loaded). 

I am using both app.navigate("path.to.remote.view"); and <a href="path.to.remote.view"> and the behavior is exhibited in both cases. I have no request params, the urls are identical each time.

I am guessing there is something fundamental and simple at the root, but I can't resolve this issue.

Thanks

[Alex Smith]

After some playing around I have identified this issue is related to requireJS.

If I create the kendo application in a <script> tag on my index page like this, the app works correctly with remote views.

kidcheck = new kendo.mobile.Application($(document.body), {
                skin: "flat",
                transition: "fade"
            });

However, if I follow the pattern of the Kendo Music Store and have the main.js module invoke the init method on the app.js module I get the behavior where all remote views are requested over and over.

main.js

var app;

require.config({

    paths: {

        jQuery: "../lib/jquery/jquery.min",

        kendo: "../lib/kendo/kendo.mobile.min"

    },

    shim: {

        jQuery: {

            exports: "jQuery"

        },

        kendo: {

            deps: ["jQuery"],

            exports: "kendo"

        }

    },
      urlArgs: "bust=" + (new Date()).getTime() // Don't cache during development.


});

 

require(["app"], function(application)

{

    $(function() {

        app = application;

        application.init();

    });

});

app.js

define(["jQuery", "kendo", "utils"], function($, kendo, utils) {
    var init = function() {

        console.log("Initializing kendo app");
        var theApp = new kendo.mobile.Application($(document.body), {
                skin: "flat",
                transition: "fade"
            });
        utils.init(theApp);
    };
     return { init : init};
});

What am I doing wrong?

[Kiril Nikolov]

Hi Alex,

In general when a remote view is loaded, when you subsequently show the same view, it should not perform additional requests by default. There is an reload option that will make the view to be reloaded every time the application navigates to it. Maybe you have this option set? Please check the following example:

http://docs.kendoui.com/getting-started/mobile/application#remote-view-that-is-refreshed-on-every-request 

Regards,
Kiril Nikolov
Telerik

[Alex Smith]

The data-reload option is not set on any view in my application.

[Kiril Nikolov]

Hi Alex,

I have tried to reproduce the issue but to no avail. Could you please check the project attached and edit it so it can reproduce the scenario that you are describing, so we can take a look at it.

Thank you in advance for your cooperation.
 
Regards,
Kiril Nikolov
Telerik

[Alex Smith]

I discovered the problem in my application. I had both my require js main entry point AND kendo mobile scripts included in my entry page.

<script data-main="js/app/main" src="js/lib/require.js"></script>
...
...
<script src="js/lib/kendo/kendo.all.min.js"></script>

Once I removed the kendo.all.min.js include I stopped getting this behavior.

[Kiril Nikolov]

Hi Alex,

I am glad that you have managed to find the problem inside your project.

If you have any questions regarding the functionality of Kendo UI, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik