车把和异步调用

Handlebars and async call

本文关键字：调用 异步      更新时间：2023-09-26

我使用此助手来检查图像是否存在：

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}}被 url 替换，但没有任何返回。可能是因为异步操作，因此必须以不同的方式处理吗？

谢谢

尽管 Handlebars 不支持异步帮助程序，但您仍然可以使用帮助程序来实现此目的。使用助手创建一些独特的 html，并使用 MutationObserver 检测它被添加到 DOM 中。然后，您可以掌握添加的img元素并根据需要对其进行修改。

一个更简单、更有效的解决方案是使用 img 元素的 onerror 属性来触发一些回调。下面是一个小提琴示例。另一个使用车把模板的小提琴。

如果你想探索Handlebars + MutationObserver的方式，我创建了一个你可以使用或适应的助手。它可以在 https://github.com/ekuusela/post-render-bars 获得，并在这个小提琴中演示。

watch.js 定义了一个函数forHtml(html, callback)当在 DOM 中遇到给定的 HTML 时，该函数会触发回调。它修改 html 以暂时拥有一个使其唯一的类。

帮助程序.js定义帮助程序renderer和函数createRenderer(getHtmlContentFn)，函数将函数包装到呈现器中，并且可以传入模板并用作帮助程序的参数。

我也想要这个，找到了一种方法：

Handlebars.registerHelper('myHelperFunctionName', function (item) {
    var element_id = 'temp-prefix-' + item, item_html = false;
    // make async call here:
    SlowAsyncCallbackPromiseThing(item, function(item_object){
        item_html = Handlebars.templates.item(item_object);
        $('span#' + element_id).replaceWith(item_html);
    });
    if(item_html){//cache resolved immediately
        return new Handlebars.SafeString(item_html);
    }
    // If the cache is barren, provide a loading span to be replaced later.
    return new Handlebars.SafeString('<span id="' + element_id + '">Loading..</span>');
});

现在，当你加载它时，内部jQuery只是在最终解析时替换临时元素......不是最好的，但它很快并且可以与Handlebars一起使用。我使用了很多本地存储缓存，因此一些承诺会立即解决。绝对头痛的故障排除，直到我弄清楚为什么它并不总是工作。

要使其适应元素的属性......并不难，但你需要某种方法来识别元素。

相关文章：