0

我正在将用户图像的预输入绑定到 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());
    });

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

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

谢谢，

-克里斯

4

1 回答 1

1

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

但是，在某些时候，您的脚本会输出模板，而无需通过模板对象的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 属性中或任何{{templateVar}}给出 anull或undefined值的地方，那么你就知道你的模板是在没有通过正确的渲染方法的情况下输出的。

于 2013-10-19T10:14:34.153 回答