0

我正在尝试将多种用途的 gravatar 显示在一个页面中，为此我正在使用 foreach 循环。此外，我正在使用淘汰赛 js 来获取电子邮件和姓名等信息，并以 json 形式返回。由于我不能将剃刀与 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'}" />

有了这个，我没有得到一个 gravatar 来显示。非常感谢任何有用的信息或提示。

代码更新

我改变了，所以它看起来是这样的：

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

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

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

4

2 回答 2

1

首先，不要将 JS 逻辑放在数据绑定中。改用计算：

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

其次，您Hash还需要成为计算的可观察对象。你现在拥有它的方式，它只评估一次，当 JS 第一次运行时，最有可能Email为空。因此，您的 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&amp;d=identicon&amp;r=G';
});

然后，您的数据绑定变得简单：

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

干净多了。

更新基于 OP 的更新

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

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

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

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

您正确地更正了设置 img src 而不是 href （我也错过了），但是当您不同时执行其他 JS 逻辑时，使用括号是不必要的，所以它应该是：

data-bind="attr: { src: Gravatar }"
于 2013-04-04T00:46:48.167 回答
1

不确定这是否有帮助，但我最近编写了一个绑定来执行此操作：

https://github.com/grofit/knockout.gravatar

因此，您可以使用淘汰赛绑定优势来使用它。

于 2013-07-25T20:34:44.330 回答