0

我有两个 observables 1.Data 和 2.Image（调用 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 是可观察的，那么您需要将其称为一个：

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

否则，您所做的就是解决 observable（就 javascript 而言，这只是一个函数）是否存在。并且它永远存在，因此将永远解析为真。

于 2013-04-25T18:47:13.530 回答