自动刷新事业部在玉模板(Node.js的/快递)(Auto-Refresh Div in Jade

2019-08-02 16:00发布

我使用Node.js的,快速,玉,和Redis的开发一种应用程序,将来自通过reversebeacon.net提供一个telnet流,这是对业余无线电俱乐部成员Redis的数据库交叉引用的,并且如果它们匹配,显示显示斑点在我的应用程序表。 这一切是迄今为止的非常棒。

不幸的是,我必须刷新整个页面上显示的表的新景点。 我想唯一的刷新,而不是设置的时间间隔,将刷新整个页面,它包含表(#activeDiv)的股利。

我已经在网络上遇到的大多数例子都紧紧围绕PHP,我试图去适应这些我的应用程序,但不是很成功迄今。

layout.jade

doctype 5
html
  head
    title HAMjitsu | Club Spotter (Flying Pigs, FISTS, SKCC, NAQCC)
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://code.jquery.com/jquery-latest.js')
    script
      // nothing I've placed here has worked :-(
  body
    h1 HAMjitsu
    p Welcome to HAMjitsu, the realtime tool that let's you see who's on the air right now!
    p This application is in the early "alpha" phase of development.  For now, the Flying Pigs will be able to see when their fellow piggies are causing havoc on the bands.  But don't you worry, other clubs will soon be able to use this tool.  
    block content

index.jade

extends layout

block content
  div#activediv
    table
      thead
        tr
          th DE
          th Freq
          th DX
          th NR
          th Mode
          th dB
          th WPM
          th CQ
          th UTC  
      tbody
        each spot, i in spots
          tr
            td: !{spot.de}
            td: !{spot.freq}
            td: !{spot.dx}
            td: !{spot.nr}
            td: !{spot.cw}
            td: !{spot.snr}
            td: !{spot.wpm}
            td: !{spot.cq}
            td: !{spot.utc}

Answer 1:

这可以用jQuery和AJAX使用来实现负载()函数。

<div id="myid"/>

$("#myid").load("a/path")

由/路径返回的数据将被存储在div内。 要获取数据,你轮询服务器每秒或使用WebSockets和数据直接从服务器到客户端推。



Answer 2:

通常,您将与客户端AJAX调用做到这一点,并更新DOM您的信息。 我建议使用jQuery:

<ul id="list"></ul>

$.get('/api/data', function(data){

 var htm = (
  '<li>'+data.foo+'</li>';
 );

 $("#list").append( htm );
});


文章来源: Auto-Refresh Div in Jade Template (Node.js/Express)