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>