车把和异步调用

我用这个帮手，请检查是否图像的存在与否：车把和异步调用

Handlebars.registerHelper('checkLogo', function(url) { 

     UrlExists(url, function(status){ 
     if(status === 200){  
     return new Handlebars.SafeString(url) 
     } 
     else if(status === 404){   
     console.log('no logo found'); 
     } 
}); 
}); 


function UrlExists(url, cb){ 
    $.ajax({ 
     url:  url, 
     dataType: 'text', 
     type:  'GET', 
     complete: function(xhr){ 
      if(typeof cb === 'function') 
       cb.apply(this, [xhr.status]); 
     } 
    }); 
}

我把它（用URL作为ARG）在我的模板是这样的：

<img src="{{checkLogo logo}}"/>

林期待{{checkLogo logo}}被替换的网址，但没有得到返回。这可能是异步行为，因为它必须以不同的方式处理？

谢谢

来源

2016-01-20 user2915962

我很确定Handlebars根本不支持异步助手。另见[这个问题]（https://github.com/wycats/handlebars.js/issues/717）。 – robertklep

好的，谢谢你，我猜我必须找到另一种方式:) – user2915962

虽然把手不支持，你仍然可以使用助手来实现这个异步助手。用助手创建一些独特的html，并使用MutationObserver检测到它被添加到DOM。然后，您可以获得添加的img元素，然后根据您的喜好进行修改。

更简单和更有效的解决方案是使用元素的onerror属性触发某个回调。 Here's an example fiddle。使用句柄模板的Another fiddle。

如果你想探索Handlebars + MutationObserver的方式，我已经创建了一个可以使用或适应的帮助器。它可在https://github.com/ekuusela/post-render-bars和this fiddle演示。

watch.js定义了一个函数forHtml(html, callback)，它在DOM中遇到给定的html时触发回调。它修改了html，暂时让它有一个独特的类。

helpers.js定义了帮助程序renderer和函数createRenderer(getHtmlContentFn)，它将您的函数包装到渲染器中，并且可以将其传递给模板并用作帮助程序的参数。

来源

2016-01-20 23:47:03 ekuusela

非常感谢，使用onerror会很棒。但是，当img-element在一个句柄模板内时它似乎不工作？我会去看看watch.js和helpers.js！ – user2915962

我很积极，你可以得到onerror与车把一起工作。也许你可以创造一个小提琴，我可以看看？ – ekuusela

太棒了！给我几分钟来尝试设置它:) – user2915962

车把和异步调用

回答

相关问题