Question

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

这些图像很重，所以我不想将它们作为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请求并从成功回调中返回它，则不是。我的Web服务返回了以下字符串：“ data：image / png; base64，/ 9j / 4AAQSkZJRgABAQEASABIAAD / 4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlu ...”

Answer 1

淘汰赛是围绕使用可观察属性来告诉它需要对哪些更改做出反应的概念而构建的。如果将DOM绑定到普通函数，则不会告诉淘汰者更新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);
})

使用剔除法，如何将图像src绑定到异步方法？

1 个答案: