0

複数の用途のグラバターを 1 ページに表示しようとしていますが、そのために foreach ループを使用しています。また、ノックアウトjsを使用して、電子メールや名前などの情報を取得し、jsonとして返しています。文字列をメールとして渡すように要求し、「data-bind="text:Email」が返されるため、グラバターでかみそりを使用できないため

私は MD5 の概念を使用しようとしていますが、これに非常に慣れていないため、正しい手順に従っているかどうかわかりません。私はこれをGoogleコードからオンラインで見つけました: http://www.devcurry.com/2012/06/retrifying-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&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、計算されたオブザーバブルでもある必要があります。Email現在の方法では、JS が最初に実行されたとき、およびnullである可能性が最も高いときに 1 回だけ評価されます。そのため、Gravatar URL に有効なメール ハッシュが入力されることはありません。

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

ただし、このHash計算済みのものは、この時点で他の計算済みのものを提供するためにのみ使用されているため、おそらく 2 つを組み合わせることができます。

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 をあきらめて、View Model に追加したようです。それは問題ありませんが、self.MD5Emailに基づいて URL 全体に を設定することで、以前に発生したのと同じロジックの問題が発生しました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'
});

href の代わりに img src の設定を正しく修正しました (私もそれを見逃しました) が、他の 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 に答える