Question

我使用这个助手检查图像是否存在：

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，但不会返回任何内容。它是否可能因异步行为而异，因此必须以不同的方式处理？

谢谢

Answer 1

虽然Handlebars不支持异步助手，但您仍然可以使用帮助程序来实现此目的。使用帮助器创建一些唯一的html，并使用MutationObserver检测它是否已添加到DOM中。然后，您可以保留已添加的img元素，并根据需要对其进行修改。

更简单，更有效的解决方案是使用onerror元素的img属性来触发一些回调。 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)，它将您的函数包装到渲染器中，并且可以传递给模板并用作帮助器的参数。 / p>

Answer 2

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

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一起使用。我使用了很多localStorage缓存，因此一些Promises会立即解决。排除故障的绝对头痛，直到我弄清楚为什么它总是不起作用。

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

把手和异步电话

2 个答案: