在淘汰赛 attr 中动态添加/删除 div答案

【问题标题】：Dynamically add/remove div in knockout attr在淘汰赛 attr 中动态添加/删除 div
【发布时间】：2013-04-25 18:45:08
【问题描述】：

我有两个 observables 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 包含布尔值。如果为 true 则显示图像 div 和数据 div 否则仅显示数据 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) { });

【问题讨论】：

标签： knockout.js

【解决方案1】：

如果 ImageFound 是一个 observable，那么你需要把它当做一个来调用：

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

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

【讨论】：

ImageFound 不是可观察的。它是一个布尔变量，用于检查未找到图像的条件。
显示您的视图模型代码以了解您在 ImageFound 上的绑定

【解决方案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>

【讨论】：

感谢您的回复。ImageFound 不是函数。在 viewModel 内部，我编写了一个 Ajax 函数，我在其中传递 dataId 以获取图像并检查 Image 为空或为空的条件。如果为 null 或为空，我将 true/false 分配给变量 ImageFound。由于我是 KO 的新手，我不确定这是否正确。用于检查条件。我们可以使用 ko.computed 吗？？
变量 ImageFound 是可观察的吗？因为如果是你必须使用 ImageFound()，而不是 ImageFound。如果它不是可观察的，那么你是对的，你应该使用 ImageFound。
数据绑定有问题。在代码 vm.data.replace(vm.data()[id],newItem) 下面的视图模型中。调用此替换函数 ImageFound 后数据未绑定。
请你提琴，否则我帮不了你。