typeahead.js 绑定到模板问题答案

【问题标题】：typeahead.js binding to template issuetypeahead.js 绑定到模板问题
【发布时间】：2013-09-27 18:20:16
【问题描述】：

我正在将用户图像的预输入绑定到 hogan 模板，代码实际上工作正常，但在控制台尝试获取资源时出现错误：localhost:####/%7B%7BuserBlankImgUrl%7D%7D

唯一有意义的是它试图绑定到模板值而不是等待一个值。

完全披露：我的应用程序大量使用 DurandalJS 和 knockoutJS，但我试图仅在下面显示相关代码。我将根据建议包括更多内容。

模板：

<img class="quarc-avatar-list-item" src="{{userBlankImgUrl}}" />

JS：

    self.userImgUrl = ko.computed(function () {
        return avatar.fromGravatar(self.email(), self.gender());
    });

我尝试过的其他事情包括：

将模板包装在空检查中，这样就不会尝试绑定。
当我删除模板 hmtl 时，我的浏览器控制台中没有出现资源错误
尝试了解更多 hogan 和 typeahead 选项以寻找其他选项。不确定诸如预渲染或设置默认的“本地”值是否会有所帮助？

谢谢，

-克里斯

【问题讨论】：

标签： javascript typeahead.js hogan.js

【解决方案1】：

我注意到的第一件事是您的 self.userImgUrl 与模板中使用的 userBlankImgUrl 不同 - 如果这是故意的，从您发布的 sn-ps 中并不清楚。

但是，在某些时候，您的脚本会输出模板而不通过模板对象的render() 方法运行它。错误请求是由图像标签的 src 属性引起的，该标签字面意思是“{{userBlankImgUrl}}”。我猜你正在本地服务器上测试你的应用程序，所以它查找的地址是http://localhost/.../{{userBlankImgUrl}}（除非你的问题中的###不仅仅是你缩短/隐藏路径而且它确实是从localhost:####/%7B%7BuserBlankImgUrl%7D%7D - 无论哪种方式问题（或至少部分问题）都是相同的）。

Hogan.js 会删除它呈现的模板中出现的任何未定义的把手变量：

var template = Hogan.compile(
    '<img class="quarc-avatar-list-item" src="{{undefinedVariable}}" />'
);
console.log( template.render({var1: "Test", var2: "Again"}) );

将输出到控制台：

<img class="quarc-avatar-list-item" src="" />

如果在 src 属性中或在任何 null 或 undefined 值的位置出现任何内容，那么您知道您的模板是在没有通过正确的渲染方法的情况下输出的。

【讨论】：