android 2.3系でmithril.jsの描画がうまくいかない時の対応 #Android

そんな端末を使うなよ、言うコメントは今回流します。
結論から言うと、諦めてconfig+jQueryを使うです。
動作環境

	バージョン
mithril.js	0.2.5
android(AQUOS PHONE SH-12C)	2.3
android(XPERIA SO-02H)	6.0

そもそもどういうことが起きるのか

selectがうまく描画されない

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mithril</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
        $(function() {
            var hoge = m.prop(1);
            var select = {
              view: function() {
                return m('select', {
                    onchange: m.withAttr('value', hoge),
                  }, [1,2,3].map(function(v) {
                    return m('option', {value: v, selected: hoge() == v}, 'hoge' + v),
                  })
                );
              }
            };
            m.mount($('#select').get(0), select);
        });
    </script>
</head>
<body>
    <h2>テスト</h2>
    <div id="select">
    </div>
</body>
</html>

上記のように書いた場合、想定としては以下のようになるはずが

古い端末(2.3)だと、selectにならず、かつoptionのhoge1、hoge2が消える。この時点でワケガワカラナイヨと唸り

inputも同様に表示されない

var input = {
  view: function() {
    return m('div', [
      // ホントはmapで(ry
      m('input', {value: 'hoge1'}),
      m('input', {value: 'hoge2'}),
      m('input', {value: 'hoge3'})
    ]);
  }
};

こっちはなぜか３つのうち２つしか表示されないとな。（数を増やしても同じ)そして、白目を向いた。

じゃあどうするか

先にも言ったとおり、config+jQueryをつかう
selectなら以下のとおりです

var select = {
  view: function() {
    return m('select', {
      config: function(e, isInitialized) {
        if (isInitialized) {
          return ;
        }
        $(e).on('change', function() {
            hoge($(this).val());
          })
          .append($('<option>').attr('value', 1).prop('selected', hoge() == 1).text('hoge1'))
          .append($('<option>').attr('value', 2).prop('selected', hoge() == 2).text('hoge2'))
          .append($('<option>').attr('value', 3).prop('selected', hoge() == 3).text('hoge3'));
      }
    });
  }
};

なんとかできた

まとめ

とりあえず、要件を満たすならjqueryを無理やり使う形になりそうです。(仮想DOMの恩恵など無い
~~そもそもそんな古い端末使うな~~
推測ですが、おそらく仮想DOMに耐えられていないjsのバグかなと思います。about:debugとしても、何も出ないから余計にたちが悪い……