Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Recipes and Snippets
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
- 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
configto handle real DOM elements and arbitrary DOM manipulation, use of helper function with
element, isInitialized, context, example of
fadesOut, running an arbitrary callback when an animation finishes.
- Another example of using a third party libary (jQuery) and the
configattribute to create a simple modal
- 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
- 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
- Route dispatcher - deal with variable and unknown/unfound 404 routes
- Routing and Redux gist and jsfiddle
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
- Mithril + Meteor DDP Meteor's live data updating protocol
- 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
- 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
Clone this wiki locally
Press h to open a hovercard with more details.