Question

1）当用户点击div中的锚点 class ='thumbs '

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

3）相应地点击了拇指 THUMB_PATH 和 THUMB_DESCRIPTION 并更新了div class ='containt'中的用户界面

简短版本：我希望Containt 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>

Knockout更新onClick Mapped ViewModel属性

0 个答案: