javascript - 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>