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

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