时间自动更新和自定义过滤器（19）

评论时间的插入和自动更新

    <script>
        var log = function() {
            console.log.apply(console, arguments)
        }

        var es = function (sel) {
            return document.querySelectorAll(sel)
        }

        var registerTimer = function () {
            setInterval(function () {
                var times = es('.gua-time')
                for (var i = 0; i < times.length; i++) {
                    var t = times[i]
                    var time = Number(t.dataset.ct)
                    log('time', time)
                    var now = Math.floor(new Date() / 1000)
                    var delta = now - time
                    var y = Math.floor(delta/3600/24/365)
                    var m = Math.floor((delta - y*3600*24*365)/3600/24/30)
                    var d = Math.floor((delta-y*3600*24*365 - m*3600*24*30)/3600/24)
                    var h = Math.floor((delta-y*3600*24*365 - m*3600*24*30 - d*3600*24)/3600)
                    var s = `${y} 年 ${m} 月 ${d} 天 ${h} 小时前`
                    t.innerText = s
                }
            }, 1000)
        }

        var __main = function () {
            registerTimer()
        }

        __main()

    </script>

<span class="gua-time" data-ct="{{ r.ct }}"></span>

通过类名获取所有节点，循环遍历所有节点插入数据。

• data-ct = {{ t.ct }}
  DOM 中有 dataset 属性对象，这里的 data- 是一个约定好的前缀，在生成 DOM 时，所有的以 data- 开头的属性，会去掉前缀 data- ，然后将剩下的保存在 dataset 中，所以 js 中以 ele.dataset.ct 取值；方便 js 获取服务器的数据。

有时候在HTML元素上绑定一些额外信息，特别是JS选取操作这些元素时特别有帮助。通常我们会使用getAttribute()和setAttribute()来读和写非标题属性的值。但为此付出的代价是文档将不再是合法有效的HTML。
对此,HTML5提供了一个解决方案。在HTML5文档中，任意以"data-"为前缀的小写的属性名字都是合法的。这些“数据集属性”将不会对其元素的表现产生影响，它们定义了一种标准的、附加额外数据的方法，并不是在文档合法性上做出让步。
HTML5还在Element对象上定义了dataset属性。该属性指代一个对象，它的各属性对应于去掉前缀的data-属性。因此dataset.x应该保存data-x属性的值。带连字符的属性对应于驼峰命名法属性名。如Element属性data-jquery-test在js中对应于dataset.jqueryTest属性。

注意，dataset属性是Element的data-属性的实时、双向接口。设置或删除dataset的一个属性就等同于设置或移除对应元素的data-属性。

• Number() 函数用于将参数转换为数字；
• Math.floor() 函数用于将参数去掉小数；
• new Date() 函数用于获取现在的 unix 时间
• ${var} 是 js 的模板字符串
• 最后插入文本 innerText

setInternal() 为自动刷新函数，第一个参数是时间函数，第二个参数为多长时间刷新一次，单位为毫秒；

自定义过滤器

app.py
@app.add_template_filter
def test1(input):
    r = 'process {} using test filter'.format(input)
    return r

<div class='inner topic'>
    <div class='topic_content'>
        <div class="markdown-text">{{ topic.content|test1 }}</div>
    </div>
</div>

test1() 函数将 topic.content 作为参数值传入函数