javascript 如何在Mustache模板中处理IF语句?

pobjuy32  于 2023-03-21  发布在  Java
关注(0)|答案(5)|浏览(196)

我正在使用mustache。我正在生成一个通知列表。通知JSON对象看起来像:

[{"id":1364,"read":true,"author_id":30,"author_name":"Mr A","author_photo":"image.jpg","story":"wants to connect","notified_type":"Friendship","action":"create"}]

有了mustache,我如何基于notified_type & action来做if语句或case语句?
如果notified_type == "Friendship"渲染……
如果notified_type == "Other && action == "invite"渲染.....
这是怎么回事?

u2nhd7ah

u2nhd7ah1#

刚刚看了一下胡子文档,他们支持“倒置部分”,其中他们的状态
如果键不存在、为false或为空列表,则将呈现它们(倒排部分)
http://mustache.github.io/mustache.5.html#Inverted-Sections

{{#value}}
  value is true
{{/value}}
{{^value}}
  value is false
{{/value}}
nfzehxib

nfzehxib2#

胡子模板,通过设计,非常简单;homepage说道:
无逻辑模板。
因此,一般的方法是在JavaScript中执行逻辑并设置一堆标志:

if(notified_type == "Friendship")
    data.type_friendship = true;
else if(notified_type == "Other" && action == "invite")
    data.type_other_invite = true;
//...

然后在模板中:

{{#type_friendship}}
    friendship...
{{/type_friendship}}
{{#type_other_invite}}
    invite...
{{/type_other_invite}}

如果你想要一些更高级的功能,但又想保持Mustache的大部分简单性,你可以看看Handlebars
Handlebars提供了必要的功能,使您可以毫无障碍地有效构建语义模板。
Mustache模板与Handlebars兼容,因此您可以使用Mustache模板,将其导入Handlebars,并开始利用额外的Handlebars功能。

ufj5ltwl

ufj5ltwl3#

一般来说,使用#语法:

{{#a_boolean}}
  I only show up if the boolean was true.
{{/a_boolean}}

目标是将尽可能多的逻辑移出模板(这是有意义的)。

6jjcrrmo

6jjcrrmo4#

我有一个简单而通用的hack来执行key/value if语句,而不是mustache中的boole-only(并且以非常可读的方式!):

function buildOptions (object) {
    var validTypes = ['string', 'number', 'boolean'];
    var value;
    var key;
    for (key in object) {
        value = object[key];
        if (object.hasOwnProperty(key) && validTypes.indexOf(typeof value) !== -1) {
            object[key + '=' + value] = true;
        }
    }
    return object;
}

有了这个黑客,一个像这样的对象:

var contact = {
  "id": 1364,
  "author_name": "Mr Nobody",
  "notified_type": "friendship",
  "action": "create"
};

在转换之前看起来像这样:

var contact = {
  "id": 1364,
  "id=1364": true,
  "author_name": "Mr Nobody",
  "author_name=Mr Nobody": true,
  "notified_type": "friendship",
  "notified_type=friendship": true,
  "action": "create",
  "action=create": true
};

你的mustache模板看起来像这样:

{{#notified_type=friendship}}
    friendship…
{{/notified_type=friendship}}

{{#notified_type=invite}}
    invite…
{{/notified_type=invite}}
8iwquhpp

8iwquhpp5#

基于@françois-dispaux的解决方案,我写了一个递归的变种,叫做prepMustache,浏览多级对象,并为所有的子对象添加key=value键,而且:

  • hasTimexxx用于变量timexxx大于00:00:00
  • 整数变量var 123的var123>0大于0
  • key[i]=value用于子阵列

我还将这个函数放在全局范围内,以便在我的Node-Red项目中的任何地方使用它。

const prepMustache = (function (object) {

    for (const key in object) {

        const value       = object[key];
        const keyWithVal  = `${key}=${value}`;

        // IS STRING, INT or BOOL
        if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
            
            object[keyWithVal] = true;

            // INT greater than zero
            if (typeof value === 'number' && Number.isInteger(value) && value > 0) {
                const intKeyWithValue = `${key}>0`;
                object[intKeyWithValue] = true;
            }

            // TIME (format 00:00:00) greater than 00:00:00
            else if (typeof value === 'string' && /^([0-9]{2}:){2}[0-9]{2}$/.test(value)) {
                const timeArray = value.split(':');
                const hours = parseInt(timeArray[0]);
                const minutes = parseInt(timeArray[1]);
                const seconds = parseInt(timeArray[2]);
                if (hours > 0 || minutes > 0 || seconds > 0) {
                    const timeKey = `has${key.charAt(0).toUpperCase() + key.slice(1)}: true`;
                    object[timeKey] = true;
                }
            }
        }

        // IS SUB-ARRAY
        else if (Array.isArray(value)) {
            value.forEach((val, i) => {
                if (typeof val === 'object') {
                    prepMustache(val);
                } else {
                    const arrKeyWithVal = `${key}[${i}]=${val}`;
                    object[arrKeyWithVal] = true;
                }
            });
        }

        // IS SUB-OBJECT
        else if (typeof value === 'object') {
            prepMustache(value);
        }
    }

    return object;
});

// Add this for NodeRed global scope only
global.set('prepMustache', prepMustache);

用途:

vars = prepMustache(vars);

使用(红色节点):

msg.payload = global.get('prepMustache')(msg.payload)

相关问题