vm-example.js

var m = require("mithril");

function pullToRefreshLayer() {
  return m(".pull-to-refresh-layer", [
    m(".preloader"),
    m(".pull-to-refresh-arrow")
  ]);
}

function infiniteScrollPreloader() {
  return m(".infinite-scroll-preloader",
    m(".preloader"));
}

var prop = function(store, callback) {
  return function(value) {
    if (arguments.length > 0) {
      if (store != value) {
        store = value;
        callback(value);
      }
    }
    return store;
  };
};

function vm() {
  var configs = m.prop([]);

  var classes = function() {
    return [
      pullToRefresh()  && "pull-to-refresh-content",
      infiniteScroll() && "infinite-scroll",
      tab() && "tab"
    ].join(" ");
  }

  var pullToRefresh = prop(false, function(value) {
    if (value) {
      configs().push(fw7.initPullToRefresh);
      configs().push(function(el) {
        el.addEventListener("refresh", value);
      });
    } else {
      configs().push(fw7.destroyPullToRefresh);
    }
  });

  var infiniteScroll = prop(false, function(value) {
    if (value) {
      configs().push(fw7.attachInfiniteScroll);
      configs().push(function(el) {
        el.addEventListener("infinite", value);
      });
    } else {
      configs().push(fw7.destroyPullToRefresh);
    }
  });

  var loadContent = m.prop(true);
  var tab = m.prop(false);

  var refresh = function(args) {
    for (var arg in args) {
      if (this.hasOwnProperty(arg)) {
        this[arg](args[arg]);
      }
    }
  }

  return {
    classes: classes,
    pullToRefresh: pullToRefresh,
    infiniteScroll: infiniteScroll,
    loadContent: loadContent,
    tab: tab,
    refresh: refresh,
    configs: configs
  }
}

function config(el, isInit, context) {
  // FIXME replace with Function.call if possible
  this.configs().forEach(function(cfg) {
    cfg(el, isInit, context);
  });
  this.configs([]);
}

function controller() {
  this.vm = vm();
}

function view(scope, args) {
  scope.vm.refresh(args);
  return m(".page-content", {id: args.id, class: scope.vm.classes(), config: config.bind(scope.vm)}, [
    scope.vm.pullToRefresh()  ? pullToRefreshLayer() : '',
    scope.vm.loadContent()    ? args.content() : '',
    scope.vm.infiniteScroll() ? infiniteScrollPreloader() : ''
  ]);
}

module.exports = {
  controller: controller,
  view: view
};