More Mithril. Sorting

by ramnathv

JavaScript

var App = {
    controller: function() {
       return {data: [1, 2, 3]}
    },
    view: function(ctrl) {
        return m(".app", [
            //pressing the button reverses the list
            m("button[type=button]", {onclick: function() {ctrl.data.reverse()}}, "Reverse"),

            ctrl.data.map(function(item) {
                //the key ensures the components aren't recreated from scratch, if they merely exchanged places
                return m.component(MyComponent, {message: "Hello " + item, key: item})
            })
        ])
    }
}

var MyComponent = {
    controller: function(args) {
        return {greeting: args.message}
    },
    view: function(ctrl) {
        return m("h2", ctrl.greeting)
    }
}

m.mount(document.body, App)