自定义格式不适用

Question

我开发了一个显示实时提要并使用 livestamp + moment 以类似于 Whosebug 对其消息所做的格式更新时间的小型应用程序。

现在我想稍微更改一下，以不同的格式显示过去 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 of livestamp code, the library uses moment fromNow格式化相对时间。

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

在你的情况下，你可以使用类似下面的代码：

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 个月的差异。

自定义格式不适用

Custom format not applying

jquery

momentjs

livestamp.js