prop(attrName, callback)

• Core
  • m
  • m.render
  • m.mount
  • m.route
  • m.request
  • m.jsonp
  • m.parseQueryString
  • m.buildQueryString
  • m.withAttr
  • m.prop
    • Description
    • Signature
    • How it works
    • Sending through requests
  • m.trust
  • m.fragment
  • m.redraw
  • m.version
  • Promise
• Optional
  • Stream
• Tooling
  • Ospec

Description

Returns a simple getter/setter object.

var name = m.prop("John")

var oldName = name.get() // First, it's set to "John"
name.set("Mary")          // Set the value to "Mary"
var newName = name.get() // Now it's "Mary", not "John"

Signature

prop = m.prop(initial?)

value = prop.get()

newValue = prop.set(newValue)

How to read signatures

How it works

The m.prop method creates a prop, a getter/setter object wrapping a single mutable reference. You can get the current value with prop.get() and set it with prop.set(value). Unlike streams, you can't observe them, so you can't do as much with them.

In conjunction with m.withAttr, you can emulate two-way binding pretty easily.

var Component = {
    oninit: function(vnode) {
        vnode.state.current = m.prop("")
    },
    view: function(vnode) {
        return m("input", {
            oninput: m.withAttr("value", vnode.state.current.set),
            value: vnode.state.current.get(),
        })
    }
}

They're also useful for making simpler models.

// With props
var Auth = {
    username: m.prop(""),
    password: m.prop(""),
    canSubmit: function() {
        return Auth.username.get() !== "" && Auth.password.get() !== ""
    },
    login: function() {
        // ...
    },
}

// Without props
var Auth = {
    username: "",
    password: "",
    setUsername: function(value) {
        Auth.username = value
    }
    setPassword: function(value) {
        Auth.password = value
    }
    canSubmit: function() {
        return Auth.username !== "" && Auth.password !== ""
    },
    login: function() {
        // ...
    },
}

Sending through requests

For convenience, props define .toJSON as an alias for .get. This is so you can send them through m.request without serializing them manually.

We could also take this model and simplify it:

// How it's loaded
User.load = function(id) {
    return m.request({
        method: "GET",
        url: "https://mithril-rem.fly.dev/api/users/" + id,
        withCredentials: true,
    })
    .then(function(result) {
        User.current = {
            id: result.id,
            firstName: m.prop(result.firstName),
            lastName: m.prop(result.lastName),
        }
    })
}

// Original
User.save = function(user) {
    return m.request({
        method: "PUT",
        url: "https://mithril-rem.fly.dev/api/users/" + user.id,
        data: {
            id: user.id,
            firstName: user.firstName.get(),
            lastName: user.lastName.get(),
        },
        withCredentials: true,
    })
}

// Simplified
User.save = function(user) {
    return m.request({
        method: "PUT",
        url: "https://mithril-rem.fly.dev/api/users/" + user.id,
        data: user,
        withCredentials: true,
    })
}