Alternative zu Push.js

Question

Ich baue eine Hybrid-App mit Phonegap, aber ich möchte Ratchet nicht verwenden, gibt es eine Alternative zu Ratchets push.js?

Ich möchte, dass der Benutzer zwischen den Seiten wechselt, ohne dass die Seite neu geladen wird.

Answer 1

Eine Möglichkeit besteht darin, einen funktionalen Router zu finden (zum Beispiel Backbone), den Inhalt Laden/Übergangscode von push.js herauszunehmen und benutzerdefinierten Code zu schreiben, um Ihre Benutzeroberfläche in den DOM zu verpacken und einzufügen.

push.js enthält Code zur Verwaltung des Browserverlaufscaches und zum Senden von Ajax-Anfragen zur Unterstützung seiner Inhaltsanfragen. Wenn Sie wie ich ein MV* wie Backbone verwenden, können Sie Ihre Ansichten in eine modifizierte Version des push.js success XHR-Handlers verpacken und einspeisen. Neben der swapContent -Methode sind die assoziativen Arrays bars und transitionMap alles, was Sie benötigen, um Ihren Inhalt an den DOM anzuhängen und zu einer neuen Seite zu wechseln.

Ich mag die gestellte Frage, weil es nicht klar ist, wie die Lücke zwischen minimalistischen UI-Frameworks, die nicht viel über Prototyping hinausgehen, wie Ratchet und ChocolateChipUI, und vollständigen Angular-Frameworks wie Ionic oder OnsenUI zu füllen ist.

Hier sind die Code-Elemente, die Sie aus push.js ausleihen müssen

 var transitionMap = {
  slideIn: 'slide-out',
  slideOut: 'slide-in',
  fade: 'fade'
};

var bars = {
  bartab: '.bar-tab',
  barnav: '.bar-nav',
  barfooter: '.bar-footer',
  barheadersecondary: '.bar-header-secondary'
};

var transition = function (data, options) {
    var key;
    var barElement;

    if (data.title) {
      document.title = data.title;
    }

    if (options.transition) {
        for (key in bars) {
            if (bars.hasOwnProperty(key)) {
                barElement = document.querySelector(bars[key]);
                if (data[key]) {
                    swapContent(data[key], barElement);
                } else if (barElement) {
                    barElement.parentNode.removeChild(barElement);
                }
            }
        }
    }

    swapContent(data.contents, options.container, options.transition, function () {});

};

var swapContent = function (swap, container, transition, complete) {
    var enter;
    var containerDirection;
    var swapDirection;

    if (!transition) {
        if (container) {
          container.innerHTML = swap.innerHTML;
        } else if (swap.classList.contains('content')) {
          document.body.appendChild(swap);
        } else {
          document.body.insertBefore(swap, document.querySelector('.content'));
        }
    } else {
        enter = /in$/.test(transition);

        if (transition === 'fade') {
          container.classList.add('in');
          container.classList.add('fade');
          swap.classList.add('fade');
        }

        if (/slide/.test(transition)) {
          swap.classList.add('sliding-in', enter ? 'right' : 'left');
          swap.classList.add('sliding');
          container.classList.add('sliding');
        }

        container.parentNode.insertBefore(swap, container);
    }

    if (!transition) {
        complete && complete();
    }

    if (transition === 'fade') {
        container.offsetWidth; // erzwingt Reflow
        container.classList.remove('in');
        var fadeContainerEnd = function () {
            container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
            swap.classList.add('in');
            swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
        };
        var fadeSwapEnd = function () {
            swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
            container.parentNode.removeChild(container);
            swap.classList.remove('fade');
            swap.classList.remove('in');
            complete && complete();
        };
        container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
    }

    if (/slide/.test(transition)) {
        var slideEnd = function () {
            swap.removeEventListener('webkitTransitionEnd', slideEnd);
            swap.classList.remove('sliding', 'sliding-in');
            swap.classList.remove(swapDirection);
            container.parentNode.removeChild(container);
            complete && complete();
        };

        container.offsetWidth; // erzwingt Reflow
        swapDirection = enter ? 'right' : 'left';
        containerDirection = enter ? 'left' : 'right';
        container.classList.add(containerDirection);
        swap.classList.remove(swapDirection);
        swap.addEventListener('webkitTransitionEnd', slideEnd);
    }
};

Und Sie können zu neuem Inhalt übergehen

var data = {
  bartab: menuDOM,
  barnav: navigationDOM,
  barfooter: null,
  barheadersecondary: null,
  title: "Neue Seite",
  content: pageContentDOM
};

var options = {
        transition: "slide-in",
        container: document.querySelector(".content")
};

transition(data, options);