我想用jQuery实现这个插件的作用:https://github.com/rmm5t/jquery-timeago
该插件的简短描述:
这将用一个类 timeago 和一个 ISO 转换所有缩写元素标题中的 8601 时间戳(符合日期时间设计模式微格式):
<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 的调用放在视图模型本身中,也没有任何反应。我猜我需要一个附加到可观察的"已发布"的订阅者,但我不确定如何设置它。
你的方法不起作用,因为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/
这是一个替代方案,它真的可能比 Niko 的答案没有任何优势,除了可能更简单:)——
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();
}
}
};