如何在 dot.js 中将对象传递给部分对象

Question

我正在尝试将新创建的对象传递给我的 dot.js 部分代码段，如下所示：

try {
  var tempFn = doT.template($('#myTpl').text());
  var resultText = tempFn({
    "foo": "this snippet"
  });
  $('#result').html(resultText);
} catch (e) {
  $('#error').show().html(e);
  throw e;
}

#error {
  font-weight: bold;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.js"></script>

<!-- Template HERE -->
<script id="myTpl" type="template/doT.js">//<![CDATA[
{{##def.snippet:obj:
  <div>How to use {{=obj.x}}</div>
#}} 
{{#def.snippet:{"x":it.foo}}}
// ]]></script>


<div id="result"></div>
<div id="error" style="display: none;"></div>

但我明白了 Template has an error: SyntaxError: Unexpected token : 那么如何创建对象（或多个参数）并将其传递给定义的部分？

怎么了？

编辑：

我有一个来自 REST 网络服务的计划结构：

"schedule": {
      "MONDAY": {
        "amOpenTime": {
          "hours": 8,
          "minutes": 30
        },
        "amCloseTime": null,
        "pmOpenTime": null,
        "pmCloseTime": {
          "hours": 17,
          "minutes": 0
        }
      },
      "TUESDAY": {
        "amOpenTime": {
          "hours": 8,
          "minutes": 31
        },
        "amCloseTime": null,
        "pmOpenTime": null,
        "pmCloseTime": {
          "hours": 17,
          "minutes": 40
        }
      },
      ....
}

我不想每天重复我的模板，因为它们必须以相同的方式处理（干！）所以我考虑使用部分片段来打印我日程表的每一行（上午 open/close 时间和下午 open/close 时间）。因此，由于上午和下午 div 会以同样的方式受到威胁，我想创建第二个片段来处理它。但是早上我只需要传递 am 前缀数据和 pm 下午这样的前缀数据：

{{##def.scheduleHalfDay:fday:
// multiple condition that I ommited
<div class="closed {{fday.type}}">{{fday.openTime.hours}}:{{fday.openTime.minutes}} - {{fday.closeTime.hours}}:{{fday.closeTime.minutes}}</div>
#}}

{{##def.scheduleRow:hday:
{{? (typeof hday.amOpenTime === "undefined" || hday.amOpenTime === null) && (typeof hday.pmCloseTime === "undefined" || hday.pmCloseTime == null) }}
<div class="closed">Closed</div>
{{??}}
{{#def.scheduleHalfDay:{"type": "morning", "openTime": hday.amOpenTime, "closeTime": hday.amCloseTime}}}--{{#def.scheduleHalfDay:{"type": "afternoon", "openTime": hday.pmOpenTime, "closeTime": hday.pmCloseTime}}}
{{?}}
#}}
<div class="agency-schedules">
    <div class="line"><div class="agency-schedules-day">Monday</div>{{#def.scheduleRow:it.horaires.MONDAY}}</div>
    <div class="line"><div class="agency-schedules-day">Tuesday</div>{{#def.scheduleRow:it.horaires.TUESDAY}}</div>
    ...
</div>

scheduleHalfDay 无效。那么如何正确传递我的 3 个参数（不更改数据结构）？

Answer 1

首先，您的模板中包含 HTML，因此您应该使用 .html() 获取模板文本。

其次，方括号 { 和 } 是为 doT 模板边框保留的，因此您不能将它们放在模板中。

第三，如果您所做的只是将对象传递给模板，则不需要在那里使用部分：

<script id="myTpl" type="template/doT.js">
  {{##def.snippet:
    <div>How to use {{=it.foo}}</div>
  #}}
  {{#def.snippet}}
</script>

这是简单的工作示例：https://jsfiddle.net/silkster/wq5tjzrt/

这是一个转换您的位置数据并将其传递给 doT 的示例：https://jsfiddle.net/silkster/wq5tjzrt/2/

编辑

从您添加的新数据来看，您需要的似乎是天数数组。您在原始 JSON 数据中拥有的是一个以日期名称作为属性的常规对象。在我下面的第三个示例中，我将对象转换为天数数组并将其传递给 doT 以输出时间表并使用部分模板来显示每天的开始和结束时间。

我必须在部分模板中做的一项编辑是更改代码片段，以便在模板中使用正确的属性。

这可能是您正在寻找的答案： 当您定义部分模板时，使用在使用部分模板时可用的变量。 "it" 是默认值，但如果您像我的示例一样在循环中使用部分，则使用循环模板中定义的变量定义部分。

此外，在转换数据时，将您可能需要的计算数据添加到模板中。例如，如果您需要确定开门时间和关门时间是在上午还是下午，那么在转换数据时执行此操作并将新的 key/value 对添加到转换后的数据中。

示例 3 使用您的日程数据：https://jsfiddle.net/silkster/nq6guog9/

Answer 2

另一种让它起作用的方法是将您的参数声明为变量。

{{ var param = {"x":it.foo}; }} {{#def.snippet:param}}

如何在 dot.js 中将对象传递给部分对象

How to pass object to partial in dot.js

javascript

template-engine

dot.js