Question

我正在使用Phonegap构建一个混合应用程序，但我不想使用Ratchet，除了Ratchet's push.js之外还有其他选择吗？

我希望用户在没有页面刷新的情况下在页面之间移动。

Answer 1

一种选择是找到一个功能路由器（例如Backbone），从push.js中提取内容加载/转换代码，然后编写一些自定义代码打包并将UI注入DOM。

push.js有代码来管理浏览器历史记录缓存并使ajax请求支持其内容请求。如果您正在使用像Backbone这样的MV *（就像我一样），您可以将视图打包并提供给push.js success XHR处理程序的修改版本。除此之外，swapContent方法，bars＆amp; transitionMap关联数组就是将内容附加到DOM并转换到新页面所需的全部内容。

我喜欢你提出的问题，因为我们不清楚如何填补极简主义UI框架之间的差距，这些框架不会像棘轮和ChocolateChipUI以及全角度框架Ionic或OnsenUI那样远远超出原型设计。

以下是您需要从push.js

借用的代码元素

    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; // force 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; // force reflow
            swapDirection      = enter ? 'right' : 'left';
            containerDirection = enter ? 'left' : 'right';
            container.classList.add(containerDirection);
            swap.classList.remove(swapDirection);
            swap.addEventListener('webkitTransitionEnd', slideEnd);
        }
    };

您可以转换到新内容

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


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

transition(data, options);

Push.js的替代品

1 个答案: