Recipes and Snippets

Stephan Hoyer edited this page Feb 12, 2018 · 73 revisions

Have a problem?

Then come back here if you're still stuck.

Table of Contents

Popular posts from Leo's blog

  • Layout helper - Using higher order functions to create sub-templates
  • Module partial application - Use of sub-modules, partial application
  • Cache helper - Use of cache object to avoid duplication of m.requests
  • View language - Use of wrapper function for attribute transformers, handling event handler conflicts by monkeypatching
  • Mapping view models - Use of view model, viewModel map, lazy map, separation UI state (application data) and domain data, Barney's animator function
  • CSS componentization - Use of transformer functions and recursive pattern matching for handling of CSS
  • Form handling - Use of data-binding helper function, bi-directional bindng, use of the browser's event delegation system
  • Table sorting - Table sorting helper, taking advantage of event-propagation
  • Dependency injection - Re-usable controllers, passing an 'options' argument to the controller
  • Wrapping m.request - How to show Loading icon before m.request completes, use of cache object, use of 'background: true'
  • Class and Models within Mithril controllers - Closure-based approach or this.based approach, class inheritance, private properties, lexical scoping, see also comments from Barney Carroll on use of factories, prototypal inheritance
  • Use of Third party libraries, animations - Use of config to handle real DOM elements and arbitrary DOM manipulation, use of helper function with element, isInitialized, context, example offadesIn and fadesOut, running an arbitrary callback when an animation finishes.
  • Another example of using a third party libary (jQuery) and the config attribute to create a simple modal

Community Contributions



Model Patterns


Loading Indicators

SVG Charts and Mithril




You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.