javascript - 使用 Jade/Jquery 更改表单

Question

我正在尝试获取一个表单来更改其选项以响应另一个事件。 Cakes 需要在 .sweet 更改时更新，但 cakes 最初是通过 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

注意:将 jade 称为哈巴狗，以纪念他们强制更换品牌。

当您在应用文件中渲染它们时，Pug 会在后端进行编译。但是，您正在与您的渲染文件并行发送其他变量，哈巴狗没有范围。

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

每个

item in cakes.topping

现在

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

至此，Pug 完成了它的工作，现在是前端问题。你不能使用 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 这样的框架。

上述带 Angular 解决方案类似于:

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

总而言之，pug 将在后端编译一个页面，其中包含所有可用的内容、变量和所有内容，但是一旦它通过并呈现，前端的工作就是让内容动态化.