車把和異步調用

我用這個幫手，請檢查是否圖像的存在與否：車把和異步調用

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

車把和異步調用

回答

相關問題