javascript - 使用knockout，如何将图像src绑定(bind)到异步方法？

Question

目前我有一个带有 ko 的 foreach 绑定(bind)，里面有一个 img 标签。我想从授权的 Web API 2 服务获取此图像作为 src 数据字符串。

这些图像很重，所以我不想将它们作为模型的源数据加载。我也不想直接链接到它们，因为我希望图像的“获取”是一个授权请求。

<div class="owl-carousel owl-theme" data-bind="foreach: loadedScreen().Screen_Mockup">
    <img class="owl-carousel-img-util" data-bind="attr: { src: getMockupImageById(screen_mockup_id()) }">
</div>

这有点有效，但前提是不涉及 ajax。如果我的 getMockupImageById() 方法仅返回一个字符串，则它已正确填充。

但是，如果我尝试发出 ajax 请求并从成功回调中返回它，则事实并非如此。我的网络服务返回此类字符串:“data:image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlu...”

Answer 1

Knockout 是围绕使用可观察属性来告诉它需要对哪些变化使用react的概念构建的。如果将 DOM 绑定(bind)到普通函数，则不会告诉 knockout 更新 UI。您应该将图像源声明为模型上的可观察属性，然后在 ajax 返回时更新该可观察属性。

这是伪代码，但它可能看起来像:

<div class="owl-carousel owl-theme" data-bind="foreach: loadedScreen().Screen_Mockup">
    <img class="owl-carousel-img-util" data-bind="attr: { src: mySource }">
</div>

...

mySource = ko.observable();

getMockupImageById(screen_mockup_id()).done(function(result){
    mySource(result);
})