javascript - ノックアウト更新 onClick Mapped ViewModel プロパティ

Question

1) ユーザーがclass='thumbs 'で div 内のアンカーをクリックしたとき

2) ViewModel のIMAGE_PATH と IMAGE_DESCRIPTIONを自動更新したい

3) クリックされたサムTHUMB_PATHとTHUMB_DESCRIPTIONに基づいて、div class='containt' 内の UI を更新します。

短いバージョン: コンテンツ div には、クリックされたサムの詳細が常に反映されるようにします。

Knockout の Mapping Plugin を使用しているときにそれを達成する方法について、誰かが私を助けたり、リソースを提案したりできますか? 前もって感謝します！

var data=    {
      "ImagesInfo": [
        {
          "IMAGE_PATH": "",
          "IMAGE_DESCRIPTION": "",
          "thumbs": [
            {
              "thumb_id": "1",
              "THUMB_PATH": "url(http://..183.jpg)",
              "THUMB_DESCRIPTION":"here is a car",
              "type": "sponsor"
            },
            {
              "thumb_id": "2",
              "THUMB_PATH": "url(http://..184.jpg)",
              "THUMB_DESCRIPTION":"here is a boat",
              "type": "img"
            },
            {
              "thumb_id": "3",
              "THUMB_PATH": "url(http://..185.jpg)",
              "THUMB_DESCRIPTION":"here is a plane",
              "type": "video"
            }
          ]
        }
      ]
    }

<div id="Images">
<div data-bind="foreach: ViewModelB">
<div class="containt" style="margin-top: 10px;">
  <div data-bind="style: { backgroundImage: IMAGE_PATH }"></div>
  <div data-bind="html: IMAGE_DESCRIPTION"></div>
  <div style="clear: both;"></div>
</div>

<div class="thumbs" style="margin-top: 10px; margin-left: 4px">
  <div data-bind="foreach: thumbs">
      <a class="thumb" data-bind="style: { backgroundImage: THUMB_PATH }, attr: { id: thumb_id }"></a>
</div>
</div>
</div>

<script>
 var ViewModelB = ko.mapping.fromJS(data);
 ko.applyBindings(ViewModelB, document.getElementById("Images"))
</script>