javascript Jade 和 jQuery 一起使用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22135758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 22:31:43  来源:igfitidea点击:

Jade and jQuery together

javascriptjquerypug

提问by Cmag

Folks, How would I implement jQuery styles on a form that I generate using Jade? What I am trying to do is to prettifyforms and make them clickable. I am terrible at UI. period.

伙计们,我将如何在使用 Jade 生成的表单上实现 jQuery 样式?我想做的是prettify形成表格并使它们可点击。我在 UI 方面很糟糕。时期。

How would I implement this selectable method on a form? http://jqueryui.com/selectable/

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

pendingArrayis an Array of JSON objects coming from Express. Just need to draw it and make it clickable. Upon a click, I would like a popup window open that I can POST to my api with... Being a backend programmer, this UI stuff is completely over my head as I never spend any time in this void.

pendingArray是来自 的 JSON 对象数组Express。只需要绘制它并使其可点击。单击后,我希望打开一个弹出窗口,我可以使用该窗口 POST 到我的 api... 作为后端程序员,这个 UI 的东西完全超出了我的头脑,因为我从来没有花时间在这个空白中。

page.jade:

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>

回答by timaschew

Your problem is not Jade & jQuery, it's Jade & JavaScript ;)

您的问题不是 Jade & jQuery,而是 Jade & JavaScript ;)

Jade try to interpret your JavaScript code as Jade code. You need to write the JavaScript as a plain text. For you purpose you can use the block in a tagsyntax, just add a dotafter script:

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

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

source: documentation

来源:文档



There is another error at the loop. eachis Jade syntax and not JavaScript, you could also loop with JavaScript code, but that would look not very nice. In the next line you try to write plain text/HTML, but it's not plain, see above.

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

if pendingArray
    each item in pendingArray
        h1=val

source: documentation

来源:文档