knockoutjs 数据绑定动态 img src 基于索引

Question

我有这个代码：

  <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"
                                        width="120" />
                                </span>
                            </td>
                        </tr>
                    </tbody>

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

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

Answer 1

一个 observableArray 初始化为一个空数组，而不是 null，即使你传递它 null。在你创建它之后，你可以给它赋值 null 然后它就会真正拥有那个值，你的条件将允许你使用

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

knockoutjs 数据绑定动态 img src 基于索引

knockoutjs data-bind dynamically img src based on index

javascript

knockout-2.0

knockout.js

knockout-3.0