knockout.jsの勉強(2)

公開:2014-06-27 06:26
更新:2020-02-15 04:37
カテゴリ:jquery,webmidi,javascript,knockout.js

computed,options,foreachバインディングを試す。

ポケミク・シーケンサーのUIをknockout.jsベースにすべく、jsfiddleを使用して勉強中である。昨日今日とcomputed,options,foreachバインディングを試していた。WebMIDIを使用して入力MIDIイベントをフォーマットし、画面に表示しつつ出力するものである。よってWebMIDIに対応していないブラウザは実行できない。

ここではMIDI入力・出力インターフェースの選択にoptionsバインディングを使用している。インターフェースの切り替え時に処理をフックしたかったのでcomputedを使用している。フックはextendするか、カスタムバインディングを作る方法でもできると思う。 MIDIイベント表示にはforeachバインディングを使用している。MIDIイベントは最新の10イベントのみを表示するようにViewModelでコントロールしている。でも本来はViewでコントロールすべきかもしれない。MIDIイベント中のデータ表示はforeachバインディングをネストして表示している。

ただたまにMIDI入力の切り換えがうまくいかず、MIDI入力AからMIDI入力Bに切り替えてもMIDI入力Aの内容が引き続き処理されてしまっていることがある。原因は今のところ不明である。。

jsfiddleでのデバッグ

jsfiddleで作成したコードをchromeでデバッグしようと思うとこれがどこに編集したコードがあるのかわからない。ググるとヒントがここに書いてあった。つまりは「fiddle.jshell.net」内にある_displayフォルダの中のindexページもしくは(編集ページパス)フォルダ内のindexページにコードがある。