Recipes and Snippets - MithrilJS/mithril.js GitHub Wiki

Have a problem?

• Check out the FAQ.
• Check out the Getting Started page.
• Check the pertinent section of the API.
• Check out Leo's excellent blog posts on Mithril.

Then come back here if you're still stuck.

---

Table of Contents

• Popular posts from Leo's blog
• Community Contributions
  • Authentication
  • Infinite Scroll
  • Drag-and-Drop
  • Routing
  • Loading Indicators
  • Animation
  • Mashups - Mithril integration with other technologies
  • Miscellaneous
  • Model Patterns
  • SVG Charts and Mithril

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.

Community Contributions

Authentication

• User Authentication with tokens
• User Authentication with tokens 2
• Minimal Authentication
• Authentication with conditional routing
• Authentication with conditional routing (Generalized, IE11+)
• Displaying different views based on permissions

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 (Mithril 0.x)
• Common header and footer on route change 2 (Mithril 0.x)
• Route dispatcher - deal with variable and unknown/unfound 404 routes
• Routing and Redux gist and jsfiddle

Model Patterns

• A store-based model layer

Drag-and-Drop

• Integration with Dragula
• Another Dragula sample correctly updating model after a drop

Loading Indicators

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

SVG Charts and Mithril

• Bar chart Example with D3.js
• Scatter chart Example with D3.js
• Pie, Bar, Line & Scatter chart examples with Paths-js

Animation

• Basic CSS animation

Mashups

• Mithril + Meteor DDP Meteor's live data updating protocol

Miscellaneous

• Mithril.js by Examples - The missing addition to Mithril.js website with many up-to-date code examples that are often searched for and just work
• Minimal inline MYSIWYG editor
• 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
• Form validation example - with Parsley, use of Regex in validation
• Content Editable example
• Login form
• Integrate Mithril in a static DOM