1.Data と 2.Image の 2 つのオブザーバブルがあります (画像を取得するために Ajax 呼び出しを行います。このために、データ ID を渡します)。画像が見つかった場合は、以下に示すように画像とデータを表示する必要があります。例:
<div class="MainDiv">
<div class="ImageDiv"><img id="img" src:"/...image/" /></div>
<div class="dataDiv" data-bind="text: data/>
</div>
画像が見つからない場合は、次のように画像の div を非表示にする必要があるとします
<div class="MainDiv">
/* Hide this when no image <div class="ImageDiv"><img src="" /> */
<div class="dataDiv" data-bind="text: data/>
</div>
以下に示すように ko attr を使用しました。 Var ImageFound にはブール値が含まれます。true の場合は画像 div とデータ div を表示し、そうでない場合はデータ div のみを表示します。
<div data-bind="attr: { class: ImageFound ? 'ImageDiv' : 'DataDiv' }">.
これを行う方法を教えてください。
ビューモデルのコードは次のとおりです。
// This function internally makes Ajax call for every data to get the corresponding image
function LoadImages(result) {
$.each(result, function (id, data) {
if (data.ImageUrl != null) {
return http.get(Url +'/?imageId=' + data.ImageUrl)
.success(function (imageResponse) {
if (imageResponse == null || imageResponse == "") {
newItem.ImageFound= false;
}else {
var newItem = vm.Data()[id];
newItem.Image = "" + imageResponse;
newItem.ImageFound= true;
vm.data.replace(vm.data()[id],newItem)
vm.data(result);
}
})
.fail(function (exception) { });