Question

我去了一个显示实时源的小应用程序，并使用livestamp + moment以类似于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修改后，因为我的feed是用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

当你看到in line 59的livestamp代码时，该库使用时刻fromNow来格式化相对时间。

Moment有一个API来自定义显示相对时间的方式，如文档的Relative time部分所述。

在您的情况下，您可以使用类似以下代码的内容：

＆＃13;

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);
    }
  }
});

＆＃13;

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

＆＃13;

它应该管理过去和未来的日期，但可能需要进行一些更改才能正确处理超过1个月的差异。

自定义格式不适用

1 个答案: