淘汰js数据-基于索引动态绑定img src

Posted 2023-05-07

【中文标题】淘汰js数据-基于索引动态绑定img src

【英文标题】：knockoutjs data-bind dynamically img src based on index

【发布时间】：2016-06-08 16:15:41

【问题描述】：

我有这个代码：

  <tbody>
                        <tr data-bind="foreach: EffectQuantityTotal">
                            <td>
                                <span>
                                    <img data-bind="attr:  src: $root.ProductEffectImages() ? $root.ProductEffectImages()[0].ImageSrc : '../images/style2/pose-select-placeholder.png' , click: $root.Paste"
                                         />
                                </span>
                            </td>
                        </tr>
                    </tbody>

$root.ProductEffectImages() 将为空，直到实际的点击事件“粘贴”不会完成。占位符图像显示正常，但我想在单击功能完成后更新图像。对象被正确创建，但我想为每个 effectquantitytotal 获取第 n 个 imageurl，例如，如果我的 EffectQuantityTotal 为 3，我将为每个值创建图像占位符，在选择 ImageUrl 之前，将显示占位符，但是一旦选择图像需要设置正确的图像 url。

因此，与我现在测试硬编码 $root.ProductEffectImages()[0].ImageSrc 不同，0 将被替换为第 n 个值，可能是使用 $index 而不是 0。

【问题讨论】：

代替[0]，试试[$index() - 1] ?

@RoyJ 目前该数组 (ProductEffectImages) 为空，直到注入第一个对象。如何避免异常？

我认为条件可以避免异常。

不，@RoyJ 得到异常 i.gyazo.com/8b868c1258f95ead64f1d6e09f875426.png

【参考方案1】：

observableArray 使用空数组进行初始化，而不是 null，即使您将其传递给 null。创建它后，您可以分配它null，然后它就会真正具有该值，并且您的条件将允许您使用

src: $root.ProductEffectImages() ? $root.ProductEffectImages()[$index() - 1].ImageSrc : ...