Mithrilでコンポーネントを使い回す

内容

リストのアイテムなど1つのview内で一部分だけ変えて使い回すコンポーネントの定義の仕方と使い方。
(自分が)忘れがちなので備忘録として。
大まかにはコンポーネントのネストの仕方とコンポーネントへのパラメータの渡し方です。
Model, ViewModelあたりのところは割愛します。View部分のみです。

まずはメインのコンポーネントを作ります。

メインのコンポーネントの定義

メインのコンポーネントから使い回すコンポーネントをネストした形で呼び出す

mainView

var MainView = {
  controller: function() {
  },
  view: function(ctrl) {
    return m("div", {id:"main-view-container"}, [
      m.component(Card),
      m.component(Card)
    ]);
  }
};

m.mount(document.body, MainView);

今回は一つコンテナとなるdivを作ってその中にm.component()を使って、
2枚のカードを更にネストする形で呼び出しています。
こうして呼び出すことで小さい部品を作って、それらを組み合わせてViewを構成することが出来ます。

次に使い回すコンポーネントを定義します。

使い回すコンポーネントの定義

Card

var Card = {
  controller: function(args) {
    this.name = args.name;
  },
  view: function(ctrl) {
    return m("span",{}, ctrl.name);
  }
}

controllerにargsという引数を渡して定義します。
こうすることでm.component()で呼ぶ際に引数の指定が出来るようになります。
上の例では渡して来た引数のnameという値をviewでspan内の文字列として使っています。
例えばここでclass名を渡したりしてstyleを切り替えたりもできるかと思います。

ここまでだとCard.controllerの引数には何も値が渡っていない状態なので、メインのコンポーネントに引数を追加します。

メインのコンポーネント内での呼び出しを変更する

mainView

var MainView = {
  controller: function() {
  },
  view: function(ctrl) {
    return m("div", {id:"main-view-container"}, [
      m.component(Card, {name:"1stCard"}),
      m.component(Card, {name:"2ndCard"})
    ]);
  }
};

m.mount(document.body, MainView);

m.component()の第二引数にオブジェクトを入れています。
この第二引数が第一引数で呼ばれたコンポーネントのcontrollerに引数として渡されるようになっています。
これで使い回しが出来ました。