Android
jQuery
Mithril.js

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

More than 1 year has passed since last update.

そんな端末を使うなよ、言うコメントは今回流します。

結論から言うと、諦めて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>

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

6-0_select.png

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

2-3_select.png


inputも同様に表示されない

var input = {

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

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

2-3_input.png


じゃあどうするか

先にも言ったとおり、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'));
}
});
}
};

2-3_select_up.png

なんとかできた


まとめ

とりあえず、要件を満たすならjqueryを無理やり使う形になりそうです。(仮想DOMの恩恵など無い

そもそもそんな古い端末使うな

推測ですが、おそらく仮想DOMに耐えられていないjsのバグかなと思います。about:debugとしても、何も出ないから余計にたちが悪い……