Question

我正在尝试获取一个表单来更改其选项以响应另一个事件。当.sweet被更改时，蛋糕需要更新，但蛋糕最初是通过res.render传递的，我不知道如何在不重新加载页面的情况下更改它。我只是最好的ajax解决方案。

应用

res.render('index', {cakes: json_object});

体：

form(name="myform")
    div.input
        each item in cakes.topping
            input(type="checkbox", name=item.color)
            | #{item.color}

尝试改变蛋糕：

头：

$(document).ready(function(){
    //requesting new Object
    $(".sweet").change(function () {
        socket.emit('choose', {sweet: $("#cho_swe").val()});
    });

    //getting new object
    socket.on('set_sweet', function(object){
         -- object is a new JSON which needs to replace cakes in the form below
    });

});

如何将我的新对象变成我可以在循环中使用的格式？

Answer 1

注意：将玉作为哈巴狗，以兑现他们强制品牌的变化。

当您在app文件中呈现它们时，Pug会在后端编译。但是，您需要与渲染文件并行发送其他变量，而该缓存没有范围。

渲染时，您无法访问Pug函数

每个

item in cakes.topping

现在是

<input 1/>
<input 2/>
etc...

此时，帕格完成了它的工作，现在它已成为前端问题。你不能使用pug的循环功能，你需要依靠前端框架或库来使内容动态化。

有几种方法可以解决这个问题，但我看到你正在使用jquery，所以我们可以走这条路：

收到套接字广播时重新填充元素：

$(document).ready(function(){
    //get the form element
    $form = $('form[name="myform"]').empty();

    //requesting new Object
    $(".sweet").change(function () {
        socket.emit('choose', {sweet: $("#cho_swe").val()});
    });

    //getting new object
    socket.on('set_sweet', function(object){
    //
    // clear the current form and add the new html
    // if you know most of the html before hand and just have a few dynamic
    // fields consider having them in the pug template with 
    // display: none;
    //
        // dynamically add new elements without needing a page reload
        object.forEach(function(val, key) {
            $form.append('<div>'
                   +' <input type="checkbox" onclick="someClickHandler()" name="' + val + '"/>'
                   +' <div>' + val + '</div>'
                   +' </div>');
        });
    });
});

如果您发现自己需要做很多动态内容，请考虑与angularjs等框架配对。

具有角度的上述解决方案类似于：

form(name="myform")
    div.input
        div(ng-repeat="item in items")
            input(type="checkbox", name=item.color)
            | #{item.color}

socket.on('set_sweet', function(object){
     $scope.items = object;
});

总而言之，帕格将在后端编译一个页面，其中包含所有可用的内容，变量和所有内容，但一旦它被传递并呈现，它就是你的工作前端使内容充满活力。

使用Jade / Jquery更改表单

1 个答案: