knockout.js - Image src 与 KnockoutJs 绑定(bind)发起两个请求

Question

给定这样的绑定(bind)

<img data-bind="attr: { src: (adv.packageImagesVm.imageUrlBase() + $data) }" alt="product image" />

图像确实可以正确显示
但我可以在网络请求中看到 两个 请求被触发:

1: myAccount.blob.core.windows.net/public/myImage.png (行)

和(莫名其妙地)

2. http://localhost/public/myImage.png
有谁知道为什么会发生第二个请求？

编辑:更多的代码:

<ul class="thumbnails" data-bind="foreach: packageImagesCollectionDto().PackageVoucherImageUrls">
    <li class="span2" data-bind="if: $data, visible: $data">           
        <img data-bind="attr: { src: (adv.packageImagesVm.imageUrlBase() + $data) }" alt="product image" />                        
    </li>
</ul>

编辑:这是 <div data-bind="text: ko.toJSON($data)"></div> 的结果

{
    "packageImagesCollectionDto": {
        "PackageId": 2,
        "PackageImageUrls": [
            "/public/product/55/AAID220.jpg",                
            "/public/product/80/retreat.jpg"
        ],
        "PackageVoucherImageUrls": [
            "/public/product/55/voucher/AAFL2xx.jpg",                
            "/public/product/80/voucher/ddVoucher.jpg"
        ]
    },
    "imageUrlBase": "http://xyz.blob.core.windows.net"
}

Answer 1

在我看来 adv.packageImagesVm.imageUrlBase() 是在 packageImagesCollectionDto() 之后更新的，所以一旦更新集合， knockout 就会执行 foreach，然后一旦 imageUrlBase 更新，它就会更新 src 绑定(bind)到基于两个可观察值的正确值。如果是这种情况，您会看到 localhost 作为第一个请求。

View 模型是如何填充的？

你能将“imageUrlBase”移动到对象的顶部吗？它并不整洁，但它应该强制 knockout 首先更新/创建该 observable，因为没有任何东西绑定(bind)到它，但它不会不必要地触发任何东西，然后当绑定(bind) dtos 时，你已经拥有 imageUrlBase 的值所以它不会发出 localhost 请求。

我希望一切都有意义! :-)