Add the ability to keep a page loaded (instead of re-rendering it) when using an ons-sliding-menu or an ons-split-view

[JoaoSaleiro]

When using an ons-sliding-menu or a ons-split-view, it's common the need to keep a page loaded in background, instead of reloading and re-rendering it.
Imagine the following scenario:

1- An app with an ons-sliding-menu
2- The most used page (mainPage.html) is a List with data, where the user is working with that data
3- The user frequently uses the ons-sliding-menu to navigate to other sections, but he will frequently get back to the mainPage.html
4- While navigating, mainPage.html is being re-rendered all the time. This creates two issues: a) it's really hard for the developer to keep the state of the mainPage.html b) it slows down the navigation

ons-sliding-menu should introduce the ability to keep a page cached, instead of re-rendering it completely

[kruyvanna]

+1

[JoaoSaleiro]

I've added a simple (and maybe ugly) ability to cache pages in Sliding Menu, by adding the code below to scope.ons.slidingMenu.setAbovePage:

  scope.ons.slidingMenu.setAbovePage = function (pageUrl) {
              if (this.currentPageUrl === pageUrl) {
                // same page -> ignore
                return;
              }

              if (pageUrl) {

                var cachedPage = this.cachedPages[pageUrl];
                if (!cachedPage) {

                  $http({
                    url: pageUrl,
                    method: "GET"
                  }).error(function (e) {
                        console.error(e);
                      }).success(function (data, status, headers, config) {

                        var templateHTML = angular.element(data.trim());
                        var pageElement = angular.element('<div></div>');
                        pageElement.addClass('page');
                        pageElement[0].style.opacity = 0;
                        var pageContent = $compile(templateHTML)(scope);
                        pageElement.append(pageContent);
                        this.$abovePage.append(pageElement);

                        this.cachedPages[config.url] = pageElement;
                        // prevent black flash
                        setTimeout(function () {
                          pageElement[0].style.opacity = 1;
                          if (this.currentPageElement) {
                          //  this.currentPageElement.remove();
                            this.currentPageElement.addClass('hiddenView');
                          }
                          this.currentPageElement = pageElement;
                        }.bind(this), 0);

                        this.currentPageUrl = pageUrl;
                      }.bind(this));

                } else {

          // We opt for the cached version of the page
          //        this.$abovePage.append(cachedPage);
                  cachedPage.removeClass('hiddenView');


                  setTimeout(function () {
                    cachedPage[0].style.opacity = 1;

                    if (this.currentPageElement) {
                      //this.currentPageElement.remove();
                      this.currentPageElement.addClass('hiddenView');

                    }
                    this.currentPageElement = cachedPage;
                  }.bind(this), 0);

                  this.currentPageUrl = pageUrl;


                }
              } else {
                throw new Error('cannot set undefined page');
              }
            }.bind(this);

css

.hiddenView {
    display: none;
}

I'm not removing the page from the dom, but instead hiding it. If the page is removed (instead of hidden), attached bindings stop working (for example, if the page has an ons-navigator-toolbar, click on buttons will not work if you open a cached page).
The dom gets bigger, but on the other hand, we just want to cache pages to where we navigate often, so there's a perceived performance increase.

[kruyvanna]

Great job!!
👍

[JoaoSaleiro]

Hey @kruyvanna , I guess you'll like this: our app built with OnsenUI is now available in App Store and Google Play:

https://itunes.apple.com/en/app/boonzi-personal-finance/id808920979
https://play.google.com/store/apps/details?id=com.boonzi.mobile

The fix I proposed in this issue is working just fine in this app, along with the changes you did in the navigation branch. :)

[kruyvanna]

@JoaoSaleiro : wow this is amazing!!! 👍
We want to request your permission to feature your app in our company showcase page.
http://monaca.mobi/en/showcase

Also if you like, you can write a blog about your app in our blog.
http://blog.onsenui.io

Again, great job!!

[kruyvanna]

By the way, we searched for the app in Japan's Google Play, but it's not there.
We can find the web version but it say it's not compatible with our Nexus 7 device.

[JoaoSaleiro]

Hey @kruyvanna, sorry for the late answer.
We're spamming this Github issue - here goes my email: joao [dot] saleiro [at] webfuel [dot] pt
:)
Drop me an email, I'll be glad to provide any info you need !

[kruyvanna]

great!