RactiveJS 和时间条件 DOM

Question

我有一个页面显示来自 json 和 Ractive.js 的时间相关文本片段。初始化后，我想每分钟检查一次，存储在 json 中的停止时间是否到期。然后应该隐藏文本片段。

我尝试过的事情：

{{#if time_due > Date.time()}}
do whatever
{{/if}}

以上对我不起作用。我还尝试了 Ractive.js 的计算属性，但这也不起作用。有没有好主意and/or可以帮帮我？

Answer 1

Ractive 不会重新计算表达式（如 time_due > Date.now()），除非它认为某些东西已经改变。简单的解决方案是将当前时间分配给一个数据属性并定期更新它：

var ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    timeNow: Date.now(),
    displayUntil: Date.now() + 5000
  }
});

setInterval( function () {
  ractive.set( 'timeNow', Date.now() );
}, 500 );

<script src='http://cdn.ractivejs.org/edge/ractive.js'></script>

<main></main>

<script id='template' tyle='text/html'>
  {{#if timeNow < displayUntil}}
    <p>now you see me</p>
  {{else}}
    <p>now you don't</p>
  {{/if}}
  
  <p>(time remaining: {{displayUntil - timeNow}}ms)</p>
</script>

RactiveJS 和时间条件 DOM

RactiveJS and time conditional DOM

javascript

json

ractivejs