Component library

[explorigin]

OT: Congratulations on the speed http://jsperf.com/angular-vs-knockout-vs-ember/308

Just dipping my toe into mithril reveals it's power and yet a pain-point. Any tool with lots of power has the potential to modularize. It would be cool if there was a place on the website or somewhere else that would publish components. (In the Knockout world, there is a section in the wiki for recipes.)

I'll start with a simple select component:

// Example usage:
//
// In your controller:
// this.select = new Select.controller({
//     caption: 'Please select an option',
//     options: {
//         'key1': 'Label 1',
//         'key2': 'Label 2'
//     }
// });
//
// Include in your view like:
// new Select.view(ctrl.select)
//

var Select;

Select = {
  controller: function(data) {
    this.classes = data.classes || '';
    this.value = m.prop(data.value);
    this.caption = data.caption;
    this.options = data.options || {};
    return this;
  },
  view: function(ctrl) {
    var option = function(key) {
      return m('option', {value: key}, ctrl.options[key]);
    };
    return [
      m("select", {
        onchange: m.withAttr("value", ctrl.value),
        value: ctrl.value(),
        'class': ctrl.classes
      }, [
        ctrl.caption ? m('option', {
          value: ''
        }, ctrl.caption) : '', Object.keys(ctrl.options).map(option)
      ])
    ];
  }
};

[lhorie]

Yeah, definitely need a place to start aggregating community-authored components. There's already a few gems floating around in various places.

Generally, I think it would be good to have github repos for these things, so they can have a proper home (with issue tracking, forkability, etc). We could start using the wiki feature in Github to link to the various projects, and I could add a link to the wiki into the main site as well.

[lhorie]

I added a link to the wiki in the community page. It'll show up on the site when 0.1.13 is released

[jsguy]

Hi guys,

Just a quick comment - if we use a bi-directionally bound model, this kind of component is not really necessary. I have such bindings here:

https://github.com/jsguy/mithril.bindings

Using it, we get this in the model:

this.selectValue = m.p();
this.options = m.p([
    { value: '', text: 'Select an option' },
    { value: 'key1', text: 'Label 1' },
    { value: 'key2', text: 'Label 2' }
]);

In the view:

m("select", { value: data.selectValue }, [
    data.options().map(function(opt) {
        return m('option', {value: opt.value}, opt.text);
    })
])

This is fully bi-directional so if you set model.selectValue("key2"), the select will update accordingly and as you change the select value, the model selectValue is updated.

Note the use of "text" and "value" in the options, which is standard HTML option attributes, which IMHO is more semantic.