12

このプラグインがjQueryを使用して行うことを実装したい： https ：//github.com/rmm5t/jquery-timeago

そのプラグインの簡単な説明：

これにより、timeagoのクラスとタイトルにISO 8601タイムスタンプが含まれるすべてのabbr要素が変わります（日時デザインパターンのマイクロフォーマットに準拠）。

<abbr class="timeago" title="2011-12-17T09:24:17Z">December 17, 2011</abbr>

このようなものに：

<abbr class="timeago" title="December 17, 2011">about 1 day ago</abbr>

ノックアウトを使用することを除いて、私のマークアップは次のようになります。

<abbr data-bind="attr: { title: Posted }" class="timeago"></abbr>

ビューモデル自体にtimeagoの呼び出しを入れても何も起こらないので、何かが同期していないと思います。監視可能な「投稿済み」に接続されているサブスクライバーが必要だと思いますが、その設定方法がわかりません。

4

2 に答える 2

22

timeagoはjQueryのdata（）関数を介してキャッシュを作成するため、このアプローチは機能しません。したがって、タイトルを更新するだけでは不十分です。

カスタムバインディングは、ここで最もクリーンな方法だと思います。

ko.bindingHandlers.timeago = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var $this = $(element);

        // Set the title attribute to the new value = timestamp
        $this.attr('title', value);

        // If timeago has already been applied to this node, don't reapply it -
        // since timeago isn't really flexible (it doesn't provide a public
        // remove() or refresh() method) we need to do everything by ourselves.
        if ($this.data('timeago')) {
            var datetime = $.timeago.datetime($this);
            var distance = (new Date().getTime() - datetime.getTime());
            var inWords = $.timeago.inWords(distance);

            // Update cache and displayed text..
            $this.data('timeago', { 'datetime': datetime });
            $this.text(inWords);
        } else {
            // timeago hasn't been applied to this node -> we do that now!
            $this.timeago();
        }
    }
};

使用法はこれと同じくらい簡単です：

<abbr data-bind="timeago: Posted"></abbr>

デモ： http： //jsfiddle.net/APRGc/1/

于 2012-06-30T00:32:11.733 に答える
1

これは別の方法ですが、おそらく少し単純なことを除いて、ニコの答えに勝る利点はまったくないでしょう:)-

usf.ko.bindings['timeago'] = {
  update: function(element, valueAccessor) {
    var $element, date;
    date = ko.utils.unwrapObservable(valueAccessor());
    $element = $(element);
    if (date) {
      $element.attr('title', date.toISOString());
      $element.data('tiemago', false);
      return $element.timeago();
    }
  }
};
于 2012-07-05T23:02:02.560 に答える