API Methods

One of the best things about Mithril.js is that it has a very small footprint. And most of the time not even all methods are needed. Therefore, the number of API methods is really manageable.

Often used in a project:

Rarely or never used in a project:

This means, you only have to know five API methods to build your brilliant SPA application. đź‘Ś

m(selector, attributes, children)

Hyperscript function that represents an HTML element in a Mithril.js view.

m("div.class#id", {title: "title"}, ["children"])

m.render(element, vnodes)

Renders a template to the DOM.

m.render(document.body, "hello")
// <body>hello</body>

Show examples using ”m.render”

m.mount(element, component)

Activates a component, enabling it to autoredraw on user events.

var state = {
  count: 0,
  inc: function() {state.count++}
}

var Counter = {
  view: function() {
    return m("div", {onclick: state.inc}, state.count)
  }
}
m.mount(document.body, Counter)

Show examples using ”m.mount”

m.route(root, defaultRoute, routes)

Navigate between "pages" within an application.

var Home = {
  view: function() {
    return "Welcome"
  }
}

m.route(document.body, "/home", {
  "/home": Home, // defines `https://localhost/#!/home`
})

Show examples using ”m.route”

m.route.set(path)

Redirects to a matching route.

m.route.set("/home")

m.route.get()

Returns the last fully resolved routing path, without the prefix.

var currentRoute = m.route.get()

m.route.prefix

Defines a router prefix. Must be set before invoking m.route().

m.route.prefix = "#!"

Creates a dynamic routable link.

m(m.route.Link, {href: "/Home"}, "Go to home page")

m.route.param()

Retrieves a route parameter from the last fully resolved route.

value = m.route.param(key)

m.route.SKIP

A special value that can be returned from a route resolver's onmatch to skip to the next route.

m.request(options)

Makes XHR (aka AJAX) requests, and returns a promise.

m.request({
  method: "PUT",
  url: "/api/v1/users/:id",
  params: {id: 1, name: "test"}
})
.then(function(result) {
  console.log(result)
})

Show examples using ”m.request”

m.jsonp(options)

Makes JSON-P requests.

m.jsonp({
  url: "/api/v1/users/:id",
  params: {id: 1},
  callbackKey: "callback",
})
.then(function(result) {
  console.log(result)
})

m.parseQueryString(querystring)

Turns a string of the form ?a=1&b=2 to an object.

var object = m.parseQueryString("a=1&b=2")
// {a: "1", b: "2"}

m.buildQueryString(object)

Turns an object into a string of form a=1&b=2.

var querystring = m.buildQueryString({a: "1", b: "2"})
// "a=1&b=2"

m.buildPathname(object)

Turns a path template and a parameters object into a string of form /path/user?a=1&b=2.

var querystring = m.buildPathname("/path/:id", {id: "user", a: "1", b: "2"})
// "/path/user?a=1&b=2"

m.parsePathname(string)

Turns a string of the form /path/user?a=1&b=2 to an object.

var object = m.parsePathname("/path/user?a=1&b=2")
// {path: "/path/user", params: {a: "1", b: "2"}}

m.trust(htmlString)

Turns an HTML or SVG string into unescaped HTML or SVG.

m.render(document.body, m.trust("<h1>Hello</h1>"))

Show examples using ”m.trust”

m.fragment(attrs, children)

Allows attaching lifecycle methods to a fragment vnode

var groupVisible = true
var log = function() {
  console.log("group is now visible")
}

m("ul", [
  m("li", "child 1"),
  m("li", "child 2"),
  groupVisible ? m.fragment({oninit: log}, [
    // a fragment containing two elements
    m("li", "child 3"),
    m("li", "child 4"),
  ]) : null
])

m.redraw()

Updates the DOM after a change in the application data layer.

var count = 0
function inc() {
  setInterval(function() {
    count++
    m.redraw()
  }, 1000)
}

var Counter = {
  oninit: inc,
  view: function() {
    return m("div", count)
  }
}

m.mount(document.body, Counter)

Show examples using ”m.redraw”

For more information see official website