使用jquery knockout js獲取gravatar

Question

我想獲得多個用途的gravatar在一個頁面中顯示，我使用foreach循環。此外，我正在使用淘汰賽js來獲取電子郵件和名稱等信息，並以json形式返回。由於我不能使用剃鬚刀與gravatar，因爲它請求一個字符串作爲電子郵件傳遞，我已返回「data-bind =」文本：電子郵件「

我想使用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&d=identicon&r=G');

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

Answer 1

首先，不要把JS邏輯在您的數據綁定。使用計算機來代替：

self.GravatarUrl = computed(function() { 
    return 'http://www.gravatar.com/avatar/' + self.Hash() + 's=30&d=identicon&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&d=identicon&r=G'; 
}); 

然後，您的數據綁定成爲簡單地說：

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

更清潔。基於OP的更新

UPDATE我不知道爲什麼你改變了我給你的代碼的邏輯，但是這就是爲什麼它不工作。

首先，您似乎已經放棄了Javascript中的MD5並將其添加到您的視圖模型中。沒問題，但是您之前通過將self.MD5Email設置爲基於data.Email的整個URL引入了與之前相同的邏輯問題。這不是一個計算和數據。電子郵件不是可觀察的。它只存在於KO視圖模型的初始創建中。你應該做的是一樣的東西：

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 }" 

Answer 2

不知道這是否幫助，但我寫了一個結合做到這本最近：

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

所以你可以使用它，使用淘汰賽的約束善良。