0

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) { }); 
4

2 に答える 2

0

visible次のようにバインディングを使用することもできます。

<div class="MainDiv">
  <div class="ImageDiv" data-bind="visible: ImageFound()">
    <img id="img"  src:"/...image/" />
  </div>
  <div class="dataDiv" data-bind="visible: !ImageFound(), text: data"/>
</div>
于 2013-04-25T18:56:14.677 に答える
0

ImageFound がオブザーバブルである場合は、それを 1 つとして呼び出す必要があります。

<div data-bind="attr: { class: ImageFound() ? 'ImageDiv' : 'DataDiv' }">

それ以外の場合は、オブザーバブル (javascript に関する限り、単なる関数) が存在するかどうかを解決するだけです。そして、それは常に存在するため、常に true に解決されます。

于 2013-04-25T18:47:13.530 に答える