カスタムフォーマットは適用されません

Question

ライブフィードを表示し、ライフサイクル+瞬間を使用してStackoverflowのメッセージと同様のフォーマットで時刻を更新する小さなアプリケーションに行ってきました。

ここでは、24時間以上経過したものを別の形式で表示するために少し変更したいと思います。

I found this thread which was exactly what I was looking for

不幸、それは私の場合では動作せず、私の要素の例は次の通りである：もちろん

<div id="container"> 
<div something else> 
</div> 
<div id="feed"> 
    <div class="timestamp" title="Less than 1 minute ago">7 minutes ago</div> 
</div> 
</div> 

上記私のフィードであるのでlivestampは、それを修正した後でありますjquery/ajaxで動的に追加されました。

だから私は次のようにそのコードを変更する上で考慮：（私は信じている）

$('.timestamp').on('change.livestamp', function(event, from, to) 
{ 
    event.preventDefault(); // Stop the text from changing automatically 

    // Get the original timestamp out of the event 
    var originalTS = event.timeStamp; 
    // Make a new moment object to compare the timestamp to 
    var newDate = moment(); 
    // Use moment's .diff method to get the ms difference between timestamps 
    var delta = newDate.diff(originalTS); 

    // If the difference is less than a day's worth of ms 
    if (delta < 86400000){ 
     // Use formatted text provided by the change event 
     console.log("if: " + newDate.format("dddd M/D/YYYY")); 
     $(this).html(to); 
    } 
    else { 
     // Format the moment object with whatever moment format you want 
     console.log("Else: " + newDate.format("dddd M/D/YYYY")); 
     $(this).html(newDate.format("dddd M/D/YYYY")); 
    } 
}).livestamp(); 

をそして、私の$(document).ready(function()の内側にこれを追加しました、しかし、原因私.timestampに動的に追加されている、のonchangeをトリガーすることはありません。

#containerを代わりに使用すると、トリガーが発生し、手動で更新するためにすべてのアイテムを繰り返し処理しなければならないと仮定します。タイムスタンプは1つのアイテムのみに存在するため問題はありません（項目ごとではありません）、このため、最初の繰り返しの後にlivestampがそれを削除するため、残りの部分を更新するタイムスタンプを知ることができません。

このシナリオで提案されているコードのように、動的要素を正しく認識させ、要素ごとにonchangeを実行する方法はありますか？または私は何かを見落としていますか？

また、livestamp.jsでカスタム書式を直接設定することは可能でしょうか？

ような何か：

var newDate = moment(); 
var delta = newDate.diff(to); 
if (delta >= 86400000) 
{ 
    to = to.format("dddd M/D/YYYY"); 
} 

After line 59 on moment.js?

Answer 1

をあなたはlivestampコードのin line 59を見ると、ライブラリは相対時間をフォーマットする瞬間fromNowを使用しています。

モーメントには、ドキュメントのRelative timeセクションに記載されているように、相対時間を表示する方法をカスタマイズするAPIがあります。

あなたは、次のコードのようなものを使用することができた場合に：

const CUSTOM_FORMAT = 'dddd M/D/YYYY'; 
 

 
moment.updateLocale('en', { 
 
    relativeTime : { 
 
    future: function (number, withoutSuffix, key, isFuture){ 
 
     if(moment(number, CUSTOM_FORMAT, true).isValid()){ 
 
     return number; 
 
     } 
 
     return "in " + number; 
 
    }, 
 
    past: function (number, withoutSuffix, key, isFuture){ 
 
     if(moment(number, CUSTOM_FORMAT, true).isValid()){ 
 
     return number; 
 
     } 
 
     return number + " ago"; 
 
    }, 
 
    dd: function (number, withoutSuffix, key, isFuture){ 
 
     var day = moment(); 
 
     if(isFuture){ 
 
     day.add(number, 'd'); 
 
     } else { 
 
     day.subtract(number, 'd') 
 
     } 
 
     return day.format(CUSTOM_FORMAT); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/livestamp/1.1.2/livestamp.min.js"></script> 
 

 
<div id="container"> 
 
<div> something else 
 
</div> 
 
<div id="feed"> 
 
    <div class="timestamp" data-livestamp="2017-02-26T00:29:22+01:00"></div> 
 
    <div class="timestamp" data-livestamp="2017-02-20T00:29:22+01:00"></div> 
 
    <div class="timestamp" data-livestamp="2017-02-28T05:26:22+01:00"></div> 
 
</div> 
 
</div>

それは過去と未来の両方の日付を管理しなければならないが、それはより違いが大きい正しく処理するためにいくつかの変更が必要になる場合があります1ヶ月。