Question

希望使用ajax帖子的结果更改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
  })
}

我尝试了部分，但不确定我是否在正确的轨道上。环顾互联网和stackoverflow一段时间后，无法找到关于Jade任务的类似问题。

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)
        }

    });

})

Answer 2

in your  get "/initial" route handler, your are rendering the 


res.render("/page", {data : data })

before the template name you musn't put the / and the template in witch you are trying to use data that at push to the view  is index.jade


router.post('/initial', function(req, res) {
    res.render('index', {data: data})
})

Ajax结果更改Jade赋值变量

2 个答案: