【代码管家】模板解析相关的语法说明

        在【代码管家】中，有不少地方会用到模板语法，但是很多小伙伴并不清楚如何使用。下面来介绍一下使用方式。

如何取值 

      如果你使用过vue，那么一定很熟悉 {{}} 这种方式来绑定数据到页面，这就是一种模板语法。在【代码管家】中我们是通过 {{=}} 来绑定数据的。

比如，有这样一个data对象数据，其内容如下：

{
    "name":"小明"
}

现在我们编写个模板如下：

<div>Hi {{=data.name}}!</div>

那么我们得到的结果就是

<div>Hi 小明!</div>

如下图就是在【代码管家-模板解析Json】中的实践

上图中data是系统设置的默认对象，表示的就是右下角的数据。

如何循环

除了简单的取值，循环逻辑可以让我们更好的处理数组类型的数据。基本语法如下，data.array表示data中的一个数组，value表示数组中的元素，index表示数组的下标

{{~data.array :value:index }}
    
{{~}}

 比如，有这样一个data对象数据，其内容如下：

{
    "nameArray":["小明", "小红"]
}

现在我们编写个模板如下：

{{~data.nameArray :name:index }}
    <div>Hi {{=name}}!</div>
{{~}}

那么我们得到的结果就是

<div>Hi 小明!</div>
<div>Hi 小红!</div>

如下图就是在【代码管家-模板解析Json】中的实践

如何条件判断

条件判断可以更好的判断一些逻辑，来选择渲染那些代码。就好比vue中的 v-if 和 v-else 的判断。基本语法如下

{{? }} // 表示if
{{?? }} // 表示else if
{{??}} // else

 比如，有这样一个data对象数据，其内容如下：

{
    "name":"小红"
}

现在我们编写个模板如下：

{{? null != data.age }}
 <div>你没有年龄!</div>
 {{?? null !=data.name}}
 <div>但我喜欢你的名字！</div>
 {{??}}
 <div>你既没有年龄也没有名字！</div>
{{?}}

那么我们得到的结果就是

 <div>但我喜欢你的名字！</div>

如下图就是在【代码管家-模板解析Json】中的实践

自定义js处理

 虽然有取值、循环、条件判断这些基本逻辑，但是在编写模板过程中仍然存在一些无法满足的情况，例如：

1. 想在模板中添加当前时间
2. 判断逻辑稍微复杂，需要中间变量来临时处理

为了解决这些问题，我们可以通过如下语法来写自己的js代码。在里面可以使用js语法，不过需要注意的是，要有分号“;”作为结束，否则会报语法错误

{{ 这里写js代码 }}

 比如，有这样一个data对象数据，其内容如下：

{
    "name":"小红"
}

现在我们编写个模板，如果是“小红”的名字就 改成 “小明”，并输出今天的日期

{{ 
    var newName = "";
    if(data.name === "小红"){
        newName = "小明"
    }
}}
 <div>我的新名字是{{=newName}}！</div>
 {{
    var today=new Date();
    var fullYear=today.getFullYear();
    var month=today.getMonth() + 1;
    var days=today.getDate();
 }}
 <div>今天是{{=fullYear}}年{{=month}}月{{=days}}日</div>

那么我们得到的结果就是

 <div>我的新名字是小明！</div>
 
 <div>今天是2024年4月12日</div>

如下图就是在【代码管家-模板解析Json】中的实践