Jade 和 jQuery 在一起答案

【问题标题】：Jade and jQuery togetherJade 和 jQuery 在一起
【发布时间】：2014-03-03 00:39:54
【问题描述】：

各位，如何在使用 Jade 生成的表单上实现 jQuery 样式？我想要做的是prettify 表单并使它们可点击。我在 UI 上很糟糕。期间。

如何在表单上实现这个可选择的方法？ http://jqueryui.com/selectable/

pendingArray 是来自Express 的 JSON 对象数组。只需要绘制它并使其可点击。单击后，我希望打开一个弹出窗口，我可以将其发布到我的 api... 作为后端程序员，这些 UI 内容完全超出了我的想象，因为我从来没有在这个空白中度过任何时间。

page.jade:

include mainNavMenu

body
    h1= title
    p#container Welcome to #{title}
    p#message (to be filled in)
    script
        alert('hello world');
        $("#message").html("message set through jquery")

block Content

if (pendingArray)
    - each val, key in pendingArray
        <h1>#{val}</h1>

【问题讨论】：

以上抛出错误：unexpected text ; from alert('hello world');

标签： javascript jquery pug

【解决方案1】：

你的问题不是 Jade 和 jQuery，而是 Jade 和 JavaScript ;)

Jade 尝试将您的 JavaScript 代码解释为 Jade 代码。您需要将 JavaScript 编写为纯文本。出于您的目的，您可以使用block in a tag 语法，只需在script 之后添加一个点：

script.
    alert('hello world');
    $("#message").html("message set through jquery")

来源：documentation

循环中还有另一个错误。 each 是 Jade 语法而不是 JavaScript，你也可以循环使用 JavaScript 代码，但这看起来不太好。在下一行中，您尝试编写纯文本/HTML，但它不是纯文本，见上文。

if pendingArray
    each item in pendingArray
        h1=val

来源：documentation

【讨论】：