画面遷移とUIの図

左画面では、新しい動物を追加することができるようになっていて、追加した要素をタップすると右画面に切り替わるようになっています。右画面では、追加した要素のプロパティである名前、画像、解説を編集できるようになっており、OKボタンを押すと左画面に戻るようになっています。

この2つの画面の切替はJavascriptで行っており、ブラウザの更新は行われません。

Knockout.jsでは、配列をobservableArrayとしてViewModelに登録し、リストのタグにdata-bind='foreach: animals'を定義することで「表示」のことを意識しながらプログラムを組み立てなければならないことから開放されます。

とても便利なのですが、現在、編集画面（右画面）のDOMはひとつしか用意しておらず、タップした要素によって右画面のinput要素を再バインドさせる必要があり、どうすればいいのか困っています。

要素の数だけ編集画面（右画面）を用意すれば解決することなのかもしれません。しかし、画像入力のプログラムには画像をトリミングする機能などが含まれており、もし要素が100個存在していた場合に大量のインスタンスが作成されることを考えると、あまりよい方法では無いと思っています。

現在、作成しているViewModelはひとつだけで、画面全体をバインドの対象にしています。これを右画面と左画面でふたつのViewModelに分割し、要素がタップされたときに右画面のViewModelを破棄し新たにバインドし直すということも考えてみたのですが、data-bindの値をjavascriptから動的に書き換えた後にko.applyBindingsに右画面のDOMを指定して再バインドすることに抵抗がありました。恐らく、もっとよい方法があるはずだと思ったからです。（そもそも一度バインドするとテンプレートが破壊されるような気もしますが）

Kockout.jsで複数の要素を同じinput要素に再バインドさせるにはどうすればよいのでしょうか？
また、再バインドすることなくこの問題を解決出来る方法などございましたら是非教えていただきたいです。