Question

我正在尝试构建一个Kendo标签，我可以在其中添加新标签，其中包含我从剃刀DropDownList中获取的数据库填充的电子邮件选择列表。当页面加载选择列表和选项时，所有加载都很好，但选项都在新行上，这会混乱格式并引发错误。

在Visual Studio中

$('#add-button').kendoButton({
            click: function () {
                var lastIndex = tabstrip.items().length;
                tabstrip.insertBefore([{
                    text: '<i class="fa fa-envelope" aria-hidden="true"/><span class="tab">Email ' + lastIndex + '</span><i id="tab-close-' + lastIndex + '" class="fa fa-close"></i>',
                    encoded: false,
this is the troublemaker-->content:'<div id = ' + lastIndex + '><div class="col-md-10">@Html.DropDownList("VendorEmails", null, htmlAttributes: new { @class = "form-control", @style = "width: 280px" })</div><div class="col-md-10"><textarea style="width: 300px; height: 200px;" placeholder="Type email for vendor here"></textarea></div></div>'
                }], tabstrip.items()[lastIndex - 1]);
                addCloseClickHandlers();
            }
        });

结果代码

jQuery('#add-button').kendoButton({
            click: function () {
                var lastIndex = tabstrip.items().length;
                tabstrip.insertBefore([{
                    text: '<i class="fa fa-envelope" aria-hidden="true"/><span class="tab">Email ' + lastIndex + '</span><i id="tab-close-' + lastIndex + '" class="fa fa-close"></i>',
                    encoded: false,
                    content: '<div id = ' + lastIndex + '><div class="col-md-10"><select class="form-control" id="VendorEmails" name="VendorEmails" style="width: 280px"><option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
</select></div><div class="col-md-10"><textarea style="width: 300px; height: 200px;" placeholder="Type email for vendor here"></textarea></div></div>'
                }], tabstrip.items()[lastIndex - 1]);
                addCloseClickHandlers();
            }
        });

所以我的问题是，我可以以某种方式将这一切保持在一条线上，以便它有效吗？我只需要它不添加新行或找到一种方法让jQuery将其全部视为一个字符串。

Answer 1

事实证明，我需要做的就是用反引号（`）替换所有单引号。这让javascript将它全部识别为一个字符串。我猜这是一种新的变量，称为“模板文字”，是ES6的新功能。我在另一个问题上找到了答案。 Better explanation

现在效果很好！

$('#add-button').kendoButton({
            click: function () {
                var lastIndex = tabstrip.items().length;
                tabstrip.insertBefore([{
                    text: '<i class="fa fa-envelope" aria-hidden="true"/><span class="tab">Email ' + lastIndex + '</span><i id="tab-close-' + lastIndex + '" class="fa fa-close"></i>',
                    encoded: false,
                    content:`<div id = ` + lastIndex + `><div class="col-md-10"><select class="form-control" id="VendorEmails" name="VendorEmails" style="width: 280px"><option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
</select></div><div class="col-md-10"><textarea style="width: 300px; height: 200px;" placeholder="Type email for vendor here"></textarea></div></div>`
                }], tabstrip.items()[lastIndex - 1]);
                addCloseClickHandlers();
            }
        });

将Razor DropDownList保留在一行上

1 个答案: