0

我现在有一个页面，上面有一组下拉列表（4），这些下拉列表用于从列表中选择数据并提交。它用于为锦标赛选择球队，所以目前我只能创建一个有 4 支球队的锦标赛。

我想更改它，以便页面仅显示一个下拉菜单Enter a number of teams，例如用户选择 4/8/16/32。根据用户选择的数字，页面应该生成这个数量的下拉菜单。

我很难做到这一点，无论用户选择什么数字，页面都需要呈现该数量的下拉菜单并相应地命名它们，即#team1, #team2, #team3.

任何想法如何做到这一点？

这是我目前使用 Jade 模板的下拉列表，如果使用 Jade 有任何混淆，请见谅，但很容易理解它是什么：

div.newMatch
  form.form-horizontal(action='/tournament', id="tournamentForm")
        div.row
      label.control-label(for="tournamentName") Tournament Name:
      div.controls
        input#tournamentName.input-mysize(type="text")
    div.row
      label.control-label(for="team1") Team 1:
      div.controls
        select#team1(style='width: 160px;')
            include teamsDropDown
    div.row
      label.control-label(for="team2") Team 2:
      div.controls
        select#team2(style='width: 160px;')
            include teamsDropDown
    div.row
      label.control-label(for="team3") Team 3:
      div.controls
        select#team3(style='width: 160px;')
            include teamsDropDown
    div.row
      label.control-label(for="team4") Team 4:
      div.controls
        select#team4(style='width: 160px;')
            include teamsDropDown

我试过的：

                div.row
                    label.control-label(for="tournamentName") Tournament Name:
                    div.controls
                        input#tournamentName.input-mysize(type="text")
                div.row
                    label.control-label(for="nTeamSelector") Tournament Size:
                    div.controls
                        select#nTeamSelector(style='width: 160px;')
                            option Please select...
                            option 2
                            option 4
                            option 8
                            option 16
                            option 32
                div.row.hidden#rowTemplate
                    label.control-label(for="team") Team:
                    div.controls
                        select#team1(style='width: 160px;')
                            include teamsDropDown
                div.row#rowContainer
                script(type='text/javascript')
                    $("#nTeamSelector").change(function(){
                        var nTeams = $("#nTeamSelector").val(); // Get the value of the team selector that you use
                        $("#rowContainer").empty() // Delete all existing dropdowns
                        for (var i=0; i<nTeams; i++){
                            var newRow = $("#rowTemplate").clone(); // Exact copy of the element generated by Jade
                            /*
                                * here you should change all the little fields that 
                                * make the dropdowns different. For example:
                            */
                            newRow.children(".control-label").setText("Team "+(i+1)+":");
                            $("#rowContainer").append(newRow);
                        }
                    });
4

2 回答 2

1

我没有使用过 Jade，但如果您可以在页面中编写 javascript 并使用 jquery（如标签所述），您可以执行以下操作：

首先在您的页面中添加一个隐藏的 teamRow。您将克隆它。这可能看起来很老套，但它允许您使用您正在使用的特殊语法为模板中的每个团队选择器创建一个基本模型。

div.row.hidden#rowTemplate
  label.control-label(for="team") Team:
  div.controls
    select#team1(style='width: 160px;')
        include teamsDropDown

Javascript：

$("#nTeamSelector").change(function(){

    var nTeams = //get the value of the team selector that you use

    $("#rowContainer").empty() //Delete all existing dropdowns

    for (var i=0; i<nTeams; i++){

        var newRow = $("#rowTemplate").clone(); //exatc copy of the element generated by Jade

        /*
         * here you should change all the little fields that 
         * make the dropdowns different. For example:
         */

        newRow.children(".control-label").setText("Team "+(i+1)+":");


        $("#rowContainer").append(newRow);

    }
});

我遗漏了诸如rowContainer之类的东西，它是一个简单的div，或者隐藏的类的css（但我认为这些与问题无关）。

我还没有做好 Jade 中的 for 所做的工作，它可能只会更改标签的一个属性，也许您应该更改输入的 id。但这只是另一对简单的 javascript 行。

于 2013-04-13T21:05:56.090 回答
1

Jade 不仅是服务器端：您还可以编译 Jade 模板以在客户端运行。如果我运行：

$ jade --client template.jade

我会得到一个template.js包含一些代码的文件，我可以在客户端使用（只要我包含runtime.js）。生成的 JavaScript 文件将声明一个调用的函数anonymous，您可以将局部变量传递给模板以照常运行。

如果我有一个仅包含以下内容的模板文件：

div.row
  label.control-label(for=id) Team 1:
  div.controls
    select(id=id, style='width: 160px;')
        include teamsDropDown

然后，假设它不使用变量，您几乎可以使用普通代码进行附加：

$(anonymous({id: "team" + (teamCounter++)})).appendTo("#tournamentForm");

（或类似的东西；我相信你能弄清楚）

顺便说一句，如果您使用的是 Node.js 和 Browserify 1，您可以使用它simple-jadeify来简化编译。

于 2013-04-13T21:02:19.713 回答