2

If I have like 10 m.module on my page, can I call m.startComputation, m.endComputation, m.redraw or m.request for only one of those modules?

It looks like any of these will redraw all of my modules.

I know only module 1 will be affected by some piece of code, I only want mithril to redraw that.

Farzher
  • 13,934
  • 21
  • 69
  • 100

2 Answers2

5

Right now, there's no simple support for multi-tenancy (i.e. running multiple modules independently of each other).

The workaround would involve using subtree directives to prevent redraws on other modules, e.g.

//helpers
var target
function tenant(id, module) {
  return {
    controller: module.controller,
    view: function(ctrl) {
      return target == id ? module.view(ctrl) : {subtree: "retain"}
    }
  }
}
function local(id, callback) {
  return function(e) {
    target = id
    callback.call(this, e)
  }
}

//a module
var MyModule = {
  controller: function() {
    this.doStuff = function() {alert(1)}
  },
  view: function() {
    return m("button[type=button]", {
      onclick: local("MyModule", ctrl.doStuff)
    }, "redraw only MyModule")
  }
}

//init
m.module(element, tenant("MyModule", MyModule))

You could probably also use something like this or this to automate decorating of event handlers w/ local

LeoHorie
  • 1,320
  • 11
  • 11
1

Need multi-tenancy support for components ? Here is my gist link

var z = (function (){
  //helpers
  var cache = {};
  var target;
  var type = {}.toString;
  var tenant=function(componentName, component) {     
      return {
        controller: component.controller,
        view: function(ctrl) {
          var args=[];
          if (arguments.length > 1) args = args.concat([].slice.call(arguments, 1))
          if((type.call(target) === '[object Array]' &&  target.indexOf(componentName) > -1) ||  target === componentName ||  target === "all")
            return component.view.apply(component, args.length ? [ctrl].concat(args) : [ctrl])
          else
            return {subtree: "retain"}
        }
      }
  }
  return {      
    withTarget:function(components, callback) {
      return function(e) {
        target = components;
        callback.call(this, e)
      }
    },    
    component:function(componentName,component){
      //target = componentName;
      var args=[];
      if (arguments.length > 2) args = args.concat([].slice.call(arguments, 2))
      return m.component.apply(undefined,[tenant(componentName,component)].concat(args));
    },  
    setTarget:function(targets){
      target = targets;
    },
    bindOnce:function(componentName,viewName,view) {
      if(cache[componentName] === undefined) {
        cache[componentName] = {};
      }
      if (cache[componentName][viewName] === undefined) {
          cache[componentName][viewName] = true
          return view()
      }
      else return {subtree: "retain"}
    },
    removeCache:function(componentName){
      delete cache[componentName]
    }
  }
})();
DhineshKumar
  • 123
  • 7