var app = {};

var pagination = {};

var list = {};

​

var outsideComponent = [];

​

list.controller = function(data){

  this.data = data;

};

​

list.view = function(ctrl){

  return m('table', [

    m('tbody', [

      ctrl.data().map(function(d){

        return m('tr', [

          m('td', d.name),

          m('td', d.age)

        ]);

      })

    ])

  ]);

};

​

pagination.controller = function(){

  this.data = m.prop(outsideComponent || []);

  if(!this.data().length){

    var deferred= m.deferred();

    deferred.promise.then(this.data).then(function(val){

      outsideComponent = val;

      return val;

    }).then(m.redraw);

    window.setTimeout(function(){

      deferred.resolve([

        {name: 'me', age: '40'},

        {name: 'me2', age: '23'}

      ]);

    }, 3000);

  }

};

​

pagination.view = function(ctrl){

  return [

    m('button[type=button]', {

      onclick: function(){

        ctrl.data().forEach(function(d){

          d.age = '' + (+d.age + 1);

        });

      }

    }, 'change data'),

    m('button[type=button]', {

      onclick: function(){m.route('/yaya');}

    }, 'routeChangeWithOutsideData'),

    m('button[type=button]', {

      onclick: function(){

        outsideComponent = [];

        m.route('/yaya');

      }

    }, 'routeChangeWithoutOutsideData')

  ];

};

​

​

app.controller = function(){

  this.pagination = new pagination.controller();

  this.list = new list.controller(this.pagination.data);

};

​

app.view = function(ctrl){

  return m('.app', [

    list.view(ctrl.list),

    pagination.view(ctrl.pagination)

  ]);

};

​

m.route(document.body, '/', {'/': app, '/yaya': app});