Recipes and Snippets

Have a problem?
Look over the docs,
Check the pertinent section of the API,
Scour Leo's excellent blog posts.
Then come back here if you're still stuck.

---

• Popular posts from Leo's blog
• Community Contributions
  • Authentication
  • Infinite Scroll
  • Drag-and-Drop
  • Routing
  • Loading indicators
  • Animation - also see Animation section of Community Projects
  • Mashups - Mithril integration with other technologies
  • Misc

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

Authentication

• User Authentication with tokens
• User Authentication with tokens 2
• Minimal Authentication
• Authentication with conditional routing
• Authentication with conditional routing (Generalized, IE11+)

Routing

• Basic routing example - switch routes from component
• Wildcard routes
• Simple router wrapper
• Unique routes for page with/without overlay
• Persist controller between route changes
• Sort Routes Logically
• Common header and footer on route change 1
• Common header and footer on route change 2

Model Patterns

• A store-based model layer

Drag-and-Drop

• integration with Dragula

Loading Indicators

• Background AJAX Loading Indicator
• Loading... spinner
• Redraw after all m.requests are complete

Animation

• Basic CSS animation

Mashups

• mithril + meteor DDP Meteor's live data updating protocol

Misc

• Angular-like data filtering on user input

• Single component redraw

• Cursor Position - uses config

• Dropdowns (select boxes)

• FLUX for Mithril - mini howto guide

• Tabs, jQuery integration with some animation

• Mithril instance in an iFrame - uses m.deps

• Mithril ES6 Components - gist using ES6 classes

• Access controller instance from outer scope

• Sync 2 or more inputs - data binding

• Date stored in model

• POST with a CORS XHR - Avoid preflight OPTIONS conflicts

• onkeypress - onKey( 'enter', save ), etc

• Execute multiple functions where one is expected - Useful for event handling. See comments for use case.

• Component inheritance

• Different views - Main showing 3 different views avoiding re-initialization of object and data

• Unicode, whitespace, and HTML entities in Mithril views - beyond the basic use of m.trust()

• Multi-Tenancy example

• Multi-tenancy with component support - running multiple independently rendered modules

• Pagination - while maintaining data through route changes

• Click list item to remove - Uses GreenSock (GSAP) animation to fade