javascript - html5 mustache获取文章索引并比较值

标签 javascript arrays html mustache

我有一个 mustache 文件,我正在遍历数组:

var data = {
        sales: [
            {
                name: "Jim Frost",
                region: "USA East",
                phone: "212-555-1212",
                email: "jfrost@acme-travel.com"
            },
            {
                name: "Jan Smith",
                region: "USA West",
                phone: "310-555-1212",
            },
            {
                name: "Fred Wesley",
                phone: "608-555-1212",
                email: "fwesley@acme-travel.com"
            },
            {
                name: "Lisa Moore",
                region: "USA South",
                phone: "315-555-1212",
                email: "lmoore@acme-travel.com"
            },
            {
                name: "Jim Dio",
                phone: "+ 44 022-555-1212",
                email: "jdio@acme-travel.com"
            },
            {
                name: "Charles Watts",
                region: "Spain",
                email: "cwatts@acme-travel.com"
            },
            {
                name: "Bert Cooper",
                region: "Italy",
                email: "bcooper@acme-travel.com"
            }
        ]
};

这是标记:

<div>
    <section>
        {{#data.sales}}
        <article class="items">
            <div class="region">{{{region}}}</div>
        </article>
        {{/data.sales}}
    </section>
</div>

仅当区域是 USA East 时,我想添加一些特殊样式(如粗体、颜色等)。 如果 {{{region}} 具有特定值,我如何检测 article 元素中的这个固有循环?鉴于比较将与我从后端获得的值进行比较,比如 {{myValue}},它在后端手动设置为 USA East

最佳答案

您可以在 data 中添加一个函数这将根据区域值返回正确的类。有点像

data['regionClass'] = function(){
  if ( this['region'] == 'USA East' ) {
    return "strong green";
  }else{
    return "";
  }
}

然后在 mustache 中你可以做:<div class="region {{regionClass}}">{{{region}}}</div>

关于javascript - html5 mustache获取文章索引并比较值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47319894/

相关文章:

html - 是否 margin 顶部 :auto help to auto-set my div?

java - 我的 Struts.xml 文件无法重定向到我的操作类并给出 404 错误

javascript - Vue - 当您可以使用数据选项轻松完成时,为什么要设置响应式(Reactive)?

javascript - 模块构建失败,Vue js 中的 vue-router.esm.js

javascript - TypeScript React 无效的钩子(Hook)调用错误 ("Error: Invalid hook call.")

c - 指向结构体的指针中的元素数量

JavaScript:如何在给定 id 的情况下从对象数组中获取对象,而不使用 for..in 循环?

php - 使用带有复选框的 html post 函数

javascript - 如何在 Google Apps 脚本中添加工作表函数?

.NET 转换隐式可转换类型的数组