0

1）当用户单击 div 内的锚点时class='thumbs '

2) 我想自动更新 ViewModel 的IMAGE_PATH 和 IMAGE_DESCRIPTION

3) 基于点击的拇指THUMB_PATH和THUMB_DESCRIPTION相应地更新 div class='containt' 内的 UI

简短版：我希望 Containt div 始终反映单击的拇指详细信息。

有人可以帮助我或建议我在使用 Knockout 的映射插件时如何实现这一目标的资源吗？提前致谢！

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>
4

0 回答 0