如何在dot.js中將對象傳遞給Partial

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受到同樣的威脅，我想創建第二個片段來解決這個問題。 但早上我只需要通過很前綴數據和下午一樣， 下午前綴數據：

{{##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”是默認值，但如果像我的示例一樣在循環中使用局部函數，則使用循環模板中定義的變量定義局部函數。

同樣，在轉換數據時，請添加可能需要在模板中計算的所有數據。 例如，如果您需要確定打開時間和關閉時間是否發生在上午或下午，則在轉換數據時執行此操作，然后將新的鍵/值對添加到轉換后的數據中。

示例3使用您的日程表數據： https : //jsfiddle.net/silkster/nq6guog9/

Answer 2

使它起作用的另一種方法是將參數聲明為變量。

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