javascript：如何在 html 中使用三元表达式渲染？

Posted 2023-03-24

【中文标题】javascript：如何在 html 中使用三元表达式渲染？

【英文标题】：javascript: How to use ternary expression render in html?

【发布时间】：2020-12-22 07:57:11

【问题描述】：

这是一个javascript三元运算符代码。

'<p>balance>0?(Stock: balance):<span class="text-danger">Not Available</span></p>'

为了在 html 中正确呈现，我尝试了很多方法，但是没有运气。

输出：balance>0?(Stock: balance):<span class="text-danger">Not Available</span> 预期输出：（库存：23）或不可用（红色）

提前谢谢你！

以下是用于使用 Bloodhound 插件的部分代码。

var prodName_typehead = 
                    name: 'prod_name',
                    displayKey: 'name',
                    hint: (App.isRTL() ? false : true),
                    source: item.ttAdapter(),
                    limit: 20,
                    templates: 
                       suggestion: Handlebars.compile([
                            '<div class="media">',
                                  '<div class="pull-left">',
                                      '<div class="media-object">',
                                          '<img src="thumb"  />',
                                      '</div>',
                                  '</div>',
                                  '<div class="media-body">',
                                      '<p><strong>name</strong></p>',
                                      '<p>desc</p>',
                                       '<p>balance>0?(Stock: balance):<span class="text-danger">Not Available</span></p>',
                                  '</div>',
                            '</div>',
                          ].join(''))
                    
                  ;

【问题讨论】：

用``来写表达式。

【参考方案1】：

我相信你想要的是这样的：

`<p>$balance>0?`Stock: $balance`:`<span class="text-danger">Not Available</span>`</p>`

当我运行这个时：

balance = 0
`<p>$balance>0?`Stock: $balance`:`<span class="text-danger">Not Available</span>`</p>`

我明白了：

"<p><span class="text-danger">Not Available</span></p>"

当我运行这个时：

balance = 1
`<p>$balance>0?`Stock: $balance`:`<span class="text-danger">Not Available</span>`</p>`

我明白了：

"<p>Stock: 1</p>"

我正在使用 javascript 模板文字来完成您要进行的变量替换。

（基本上，您遇到的问题是您需要打勾（`）而不是双引号（“）来制作模板文字，正如 NarayaN 在他的评论中提到的那样，在第一个括号之前的 $ 开始嵌入 javascript 和然后在第一个字符串选项中为 balance 嵌套相同的逻辑。）

【讨论】：

我尝试了您建议的方法，但它不起作用 -> 709 Uncaught ReferenceError: balance is not defined.

如果compile 步骤的输入需要双括号，正确的解决方案应该是：<p>$balance>0?Stock: balance:不可用</p>

错误消失但仍无法正常工作。输出显示如下 $balance>0?Stock: balance:Not Available

@user610983 抱歉，我之前的评论可能格式不正确，您能否确认您输入的内容（刻度在这里不起作用，所以用刻度替换我写的单引号）：'

是的。我用刻度替换了单引号并添加了双括号。这次我得到一个错误：意外字符串。