I am trying to pass a new created object to my dot.js partial snippet like this :
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>
But I get Template has an error: SyntaxError: Unexpected token :
So how can I create and pass object (or multiple params) to a defined partial ?
What's going wrong ?
EDIT:
I have a schedule structure that come from a REST webservice like that :
"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
}
},
....
}
I would to do not repeat my templating for each day because they must be processed in same way (DRY!) So I consider using partial snippet to print each line of my schedule (morning open/close time and afternoon open/close time). So as morning and afternoon div sould be threated in same way, I would like to create a second snippet to handle that. But for morning I need to pass only am prefixed data and pm prefixed data for afternoon like that :
{{##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 are not working. So how can I pass my 3 parameters properly (without change data structure) ?
Another way to make it work is to declare your param as a variable.
{{ var param = {"x":it.foo}; }}
{{#def.snippet:param}}