pelonpelon

// example using the raf module from npm. try changing some values!
var requestAnimationFrame = require("raf")
var canvas = document.createElement("canvas")

canvas.width = 500
canvas.height = 500

document.body.appendChild(canvas)

var context = canvas.getContext("2d")

pelonpelon

/*
 * Mithril.Elements
 * Copyright (c) 2014 Phil Toms (@PhilToms3).
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

'use strict';
var m = (function app(window, mithril) {

pelonpelon

mithriljs snippets

• Mithril Snippets 2
• scroller
• tabs
• svg icons
• m.route, dynamic route
• model with request
• layout wrapper
• m.request, cache busting
• m.request, background:true

pelonpelon

• dictionary switches
• prototypical inheritance
• debounce
• poll
• once
• getAbsoluteURL
• isNative function (before unnecessary override)
• insertCSSRule
• matchesSelector (does el match selector)

pelonpelon

mithriljs snippets 2

• wizard
• submit form
• panels
• classList
• session token: preserve entryPoint
• disable/enable button
• target transition event
• expandable list
• checkbox count

pelonpelon

export default ( object, jsonIndent = 2 ) =>
	JSON.stringify( 
		object, ( key, value ) =>
			value instanceof Function 
				? value.toString()
				: value,
		jsonIndent
	)
	.replace( /\\n/g, '\n' )
	.replace( /\\r/g, '\r' )

pelonpelon

function state (namespace) {
  if (!namespace) return internalState[internalState.length - 1]
  internalState.push([namespace, options])
  m.redirect(namespace, options)
}

function goto (namespace, options) {
  return function (e) {
    e.preventDefault()
    e.stopPropagation()

pelonpelon

m.initComponent = function (component, options, content) {
  var controller = new component.controller(options)
  controller.render = function (options2, content2) {
    return component.view(controller, options2 || options, content2 || content)
  }
  return controller
}

pelonpelon

####Unicode needs no extra escaping when in a view template string

m('div', "あなたは友人である場合は、パスワードを話す、とドアが開きます")
m.render(document.body, "hello 世界")

####Whitespace can be achieved a few different ways:

css

m("div[style='white-space:pre']", "LIST:\n\titem 1\n\titem 2")

pelonpelon

var LoadingExample = {
  controller: function () {
    var ctrl = this
    // `background: true` is important here.
    // Otherwise Mithril will wait for the AJAX request to complete before rendering the view.
    ctrl.users = m.request({ url: 'users', method: 'GET', background: true })
  },
  view: function (ctrl) {
    return m('.users', [
      m('h3', "All Users"),