如何在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 :，所以如何创建对象(或多个params)并将其传递给定义的部分？

出什么问题了？

编辑：

我有一个来自这样的REST 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
        }
      },
      ....
}

我不想每天重复我的模板，因为它们必须以相同的方式处理(干！)因此，我考虑使用部分片段打印我的日程安排的每一行(上午开放/关闭时间和下午开放/关闭时间)。因此，由于上午和下午的div应该是相同的方式，我想创建第二个片段来处理这个问题。但对于上午，我只需要传递一个前缀数据，下午的下午前缀数据如下：

{{##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

另一种使其工作的方法是将param声明为变量。

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

Answer 2

首先，模板中包含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“是默认的，但是如果像我的示例一样在循环中使用分部，那么使用循环模板中定义的变量定义分部。

此外，在转换数据时，添加模板中可能需要的计算中的任何数据。例如，如果需要确定打开时间和关闭时间是否发生在上午或下午，则在转换数据时这样做，并将新的键/值对添加到转换后的数据中。

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