基于 Input 使用 Jade 生成 HTML答案

【问题标题】：Generate HTML with Jade based on Input基于 Input 使用 Jade 生成 HTML
【发布时间】：2014-04-15 12:48:47
【问题描述】：

基本上，我试图让用户能够生成具有特定数量列表条目的列表。如果他输入数字“50”，我想自动生成一个包含 50 个列表条目的列表。

我现在正在使用 Jade 和 Bootstrap。

我的代码看起来像这样，但显然不起作用。有没有一种简单的方法/改变来实现我的目标，还是我完全走错了路？按下“生成按钮”会发生第一个错误，因为它找不到函数“生成”。

h1 1D Lists

    form(role="form")
        div.form-group
            label(for="itemsNumber") How many List Items?
            input(type="number", class="form-control", placeholder="Number of List Items", id="itemsNumber")
        div.form-group
            label(for="alignment") Alignment?
            select.form-control
                option Horizontal
                option Vertical
        button.generate(type="submit", class="btn btn-default", onclick="generate()") Generate


    - var generate = function() {
    - alert("generated!")
    -   var itemsNumber = document.getElementById("itemsNumber").value;
    -   $("list").html("+list(itemsNumber)");
    - }

    mixin list(number)
        div.list        
            ul.list-group.level1
                a.list-group-item.listhead
                    i.fa.fa-list  My List
                - for (var i = 0; i < number; ++i){
                    a(href="#").list-group-item Entry #{i}

                - }

【问题讨论】：

标签： javascript html node.js twitter-bootstrap pug

【解决方案1】：

您的生成功能仅在 jade 编译时可用，
不在 javascript 执行时间（在浏览器中）

所以把你的函数放到<script>标签中，用script.标记

【讨论】：