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

Question

我正在尝试将一个新创建的对象传递给我的 dot.js 部分 sn-p，如下所示：

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
        }
      },
      ....
}

我不想每天重复我的模板，因为它们必须以相同的方式处理（干！） 所以我考虑使用部分 sn-p 打印我的日程安排的每一行（早上开/关时间和下午开/关时间）。 因此，由于早上和下午的 div 会以同样的方式受到威胁，我想创建第二个 sn-p 来处理这个问题。但是对于早上我只需要传递 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

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

{{ 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 以输出时间表并使用部分模板来显示每天的开始和结束时间。

我必须在部分模板中进行的一个编辑是更改 sn-p，以便在模板中使用正确的属性。

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

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

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