javascript - 使用 jquery knockout js 检索头像

Question

我正在尝试让多个用途的头像显示在一页中，并且我正在使用 foreach 循环。我还使用knockout js 来获取电子邮件和姓名等信息并以json 形式返回。由于我无法将 razor 与 gravatar 一起使用，因为它请求将字符串作为电子邮件传入，而我所返回的内容为“data-bind =“text:Email”

我正在尝试使用 MD5 概念，但我对此很陌生，不确定我是否遵循了正确的步骤。我从谷歌网上找到了这个代码:http://www.devcurry.com/2012/06/retrieving-gravatar-using-jquery.html

我尝试实现但不确定我的代码是否正确编写:

我的 javascript 的一部分与我正在做的事情相关:

$.views.Games.UserViewModel = function (data) {
    var self = this;
    self.Name = ko.observable(data.Name);
    self.Email = ko.observable(data.Email);

    self.Hash = CryptoJS.MD5(Email);
};

我的查看页面:

<img alt="Gravatar" title="My Gravatar" data-bind="attr:{href:'http://www.gravatar.com/avatar/' +Hash()+'?s=30&amp;d=identicon&amp;r=G'}" />

这样我就无法显示头像了。非常感谢任何有用的信息或提示。

代码更新

我做了修改，所以它看起来是这样的:

查看模型
public string MD5Email { get{ return Email.MD5Hash(); } }

javascript
self.MD5Email = ko.observable('http://www.gravatar.com/avatar/' + data.MD5Email + '?s=30&d=identicon&r=G');

查看页面
<img width="158" height="158" alt="Gravatar" data-bind="attr:{'src':MD5Email()}"/>

Answer 1

首先，不要将 JS 逻辑放入数据绑定(bind)中。使用计算代替:

self.GravatarUrl = computed(function() {
    return 'http://www.gravatar.com/avatar/' + self.Hash() + 's=30&d=identicon&r=G';
});

其次，您的 Hash 也需要是一个计算的可观察值。按照您现在的方式，它仅在 JS 首次运行时评估一次，并且当 Email 很可能为 null 时。因此，您的 Gravatar URL 永远不会填充有效的电子邮件哈希值。

self.Hash = computed(function() {
    return CryptoJS.MD5(self.Email);
});

但是，由于此时计算的 Hash 仅用于为其他计算提供服务，因此您可以而且应该将两者结合起来:

self.GravatarUrl = computed(function() {
    var hash = CryptoJS.MD5(self.Email);
    return 'http://www.gravatar.com/avatar/' + hash + 's=30&d=identicon&r=G';
});

然后，您的数据绑定(bind)变得简单:

<img alt="Gravatar" title="My Gravatar" data-bind="attr:{ href: GravatarUrl }" />

更加干净。

根据OP的更新进行更新

我不确定你为什么改变了我给你的代码的逻辑，但这就是它不起作用的原因。

首先，您似乎已经放弃了 Javascript 中的 MD5 并将其添加到您的 View 模型中。这很好，但是您通过将 self.MD5Email 设置为基于 data.Email 的整个 URL，引入了与之前相同的逻辑问题。这不是计算数据。电子邮件不是可观察的。它仅在 KO View 模型初始创建时存在。你应该做的是这样的:

self.MD5Email = ko.observable(data.MD5Email);

self.Gravatar = ko.computed(function () {
    return 'http://www.gravatar.com/avatar/' + self.MD5Email() + '?s=30&d=identicon&r=G'
});

你已经正确地纠正了设置img src而不是href(我也错过了这一点)，但是当你不同时执行其他JS逻辑时，使用括号是不必要的，所以它应该是:

data-bind="attr: { src: Gravatar }"