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 Web服务的计划结构：

"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应该以同样的方式进行威胁，我想创建第二个片段来处理它。但是对于早上我需要只传递 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以输出计划并使用部分模板显示每天的开始和结束时间。

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

这可能是您正在寻找的答案： 定义部分模板时，请使用在使用部分时可用的变量。＆＃34;它＆＃34;是默认值，但是如果在我的示例中使用循环中的partial，则使用循环模板中定义的变量定义partial。

此外，在转换数据时，添加模板中可能需要的计算中的任何数据。例如，如果您需要确定开放时间和结束时间是在上午或下午发生，那么在转换数据并将新的键/值对添加到转换后的数据时执行此操作。

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

Answer 2

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

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

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

2 个答案: