javascript - Ajax 结果改变 Jade 赋值变量

Question

希望用 ajax post 的结果更改 Jade 分配的变量，以便页面的 Jade 循环利用新数据(仅更新与循环相关的 dom 部分，而不是渲染页面)。

route.js

router.post('/initial', function(req, res) {
  res.render('/page', {data: data})
})
router.post('/refresh', function(req, res) {
  res.send(newdata)
})

index.jade

block content
  - var fluxdata = data
  each item in fluxdata
    span= item
  div#button

client.js

$(document).on('click', '#button', function() {
  $.post('/refresh', function(newdata) {
    var fluxdata = newdata
  })
}

我试过部分音轨，但不确定我是否在正确的轨道上。在 Internet 和 stackoverflow 上看了一会儿，找不到关于 Jade assignments 的类似问题。

Answer 1

// Jade template
block content
    div(class="content")
        - var fluxdata = data
        each item in fluxdata
            span #{item.id} : #{item.username}
    div
        button(id="add") POST Data

after your template is rendered your html will look like this


// HTML rendered
<div class="content">
    <span>1 : Yves</span>
    <span>2 : Jason</span>
</div>
<div>
    <button id="add">POST DATA</button>
</div>

// backend code

var users = [
    {
        username: "Yves", 
        id: 1
    }, 
    {
        username: "Jason", 
        id: 2
    }
]

router.get("/initial", function(request, responser) {
    response.render("index", { data: users})
})


router.post("/refresh", function(request, responser) {
    users.push({username: "Alex",id: 1})

    response.json({ data: users})
})



// Your jquery code

$("#button").on('click', function(event){
    event.preventDefault()
    $.post('/refesh', function(data) {
        $(".content").html("")
        for(var user in data) {
            var span = $("<span>")          
            span.text(user.id + ": " + user.username )
            $(".content").append(span)
        }

    });

})