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>