Question

我有两个可观察者 1.数据和 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包含布尔值。如果是真实的显示图像div＆amp; data div else只显示数据div。

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

你能建议怎么做吗？

这是viewModel代码：

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

Answer 1

如果ImageFound是一个可观察的，那么你需要把它称为一个：

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

否则你所做的就是解决是否存在observable（只是一个函数，就javascript而言）。它总是会存在，因此永远都会变为真实。

Answer 2

你也可以像这样使用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>

在knockout attr中动态添加/删除div

2 个答案: