javascript - How to pass object to partial in dot.js -
i trying pass new created object dot.js partial snippet :
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 use {{=obj.x}}</div> #}} {{#def.snippet:{"x":it.foo}}} // ]]></script> <div id="result"></div> <div id="error" style="display: none;"></div>
but template has error: syntaxerror: unexpected token :
how can create , pass object (or multiple params) defined partial ?
what's going wrong ?
edit:
i have schedule structure come rest webservice :
"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 not repeat templating each day because must processed in same way (dry!) consider using partial snippet print each line of schedule (morning open/close time , afternoon open/close time). morning , afternoon div sould threated in same way, create second snippet handle that. morning need pass am prefixed data , pm prefixed data afternoon :
{{##def.schedulehalfday:fday: // multiple condition 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 not working. how can pass 3 parameters (without change data structure) ?
another way make work declare param variable.
{{ var param = {"x":it.foo}; }} {{#def.snippet:param}}
Comments
Post a Comment