RactiveJS与时间条件DOM

Question

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

我尝试过的事情：

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

以上这些对我都不起作用。我还使用了Ractive.js的计算属性，但这也不起作用。有人有好主意和/或能帮我吗？

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>

​