Handlebars parse error while compiling template - handlebars.js

i am getting below error while compiling handlebars template with windows CMD. my handlebars client and server both are #1.3.0 please help me to identify where i am going wrong
dashboard.handlebars code--
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2" style="text-align:center;">
<li>
<div class="chart" data-percent="{{#getPercent reward_point.point_achived reward_point.point_available}}">
<span>{{#getPercent reward_point.point_achived reward_point.point_available}}%</span>
<span style="font-size:.5em;display:inline-block;">{{reward_point.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{reward_point.point_available}} RP</span>
</div>
</li>
<li>
<div class="chart" data-percent="{{#getPercent calorie_budget.point_achived calorie_budget.point_available}}">
<span>{{#getPercent calorie_budget.point_achived calorie_budget.point_available}}</span>
<span style="font-size:.5em;display:inline-block;">{{calorie_budget.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{calorie_budget.point_available}} cal</span>
</div>
</li>
<li>
<div class="chart" data-percent="{{#getPercent 30_day_challenge.point_achived 30_day_challenge.point_available}}">
<span>{{#getPercent 30_day_challenge.point_achived 30_day_challenge.point_available}}</span>
<span style="font-size:.5em;display:inline-block;">{{30_day_challenge.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{30_day_challenge.point_available}} complete</span>
</div>
</li>
<li>
<div class="chart" data-percent="{{#getPercent physical_activity.point_achived physical_activity.point_available}}">
<span>{{#getPercent physical_activity.point_achived physical_activity.point_available}}</span>
<span style="font-size:.5em;display:inline-block;">{{physical_activity.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{physical_activity.point_available}} min</span>
</div>
</li>
</ul>
error in cmd--
Error: Parse error on line 34:
</ul> </li>
----------------------^
Expecting 'CONTENT', 'COMMENT', 'OPEN_BLOCK', 'OPEN_INVERSE', 'OPEN_ENDBLOCK', '
OPEN', 'OPEN_UNESCAPED', 'OPEN_PARTIAL', got 'EOF'
at Object.parseError (C:\Users\User\AppData\Roaming\npm\node_modules\handleb
ars\dist\cjs\handlebars\compiler\parser.js:107:11)
at Object.parse (C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\d
ist\cjs\handlebars\compiler\parser.js:159:22)
at HandlebarsEnvironment.parse (C:\Users\User\AppData\Roaming\npm\node_modul
es\handlebars\dist\cjs\handlebars\compiler\base.js:12:17)
at precompile (C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\dis
t\cjs\handlebars\compiler\compiler.js:435:17)
at HandlebarsEnvironment.hb.precompile (C:\Users\User\AppData\Roaming\npm\no
de_modules\handlebars\dist\cjs\handlebars.js:22:12)
at processTemplate (C:\Users\User\AppData\Roaming\npm\node_modules\handlebar
s\bin\handlebars:188:78)
at C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\bin\handlebars:
194:3
at Array.forEach (native)
at Object.<anonymous> (C:\Users\User\AppData\Roaming\npm\node_modules\handle
bars\bin\handlebars:193:8)
at Module._compile (module.js:456:26)

You are calling your getPercent-helper with a hash in front of it which makes it a block-statement which then in turn would need to be closed using {{/getPercent}}. Since there shouldn't be any need for it to be a block you probably could just remove the hash from your template.
<div class="chart" data-percent="{{getPercent reward_point.point_achived reward_point.point_available}}">
<span>{{getPercent reward_point.point_achived reward_point.point_available}}%</span>
<span style="font-size:.5em;display:inline-block;">{{reward_point.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{reward_point.point_available}} RP</span>
</div>

Related

Cannot read property 'length' of undefined at MyComponent.MeteorComponent.ngOnDestroy

I have this error showing up when trying to go outside of MyComponent it seems to be triggered on ngOnDestroy():
Error: Uncaught (in promise): EXCEPTION: Error in /client/+multi-project/pm/ny-pm-tracker-details/ny-pm-tracker-details.component.html:10:12
ORIGINAL EXCEPTION: TypeError: Cannot read property 'length' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'length' of undefined
at TrackerAsideComponent.MeteorComponent.ngOnDestroy (http://localhost:3000/packages/modules.js?hash=6111b8d7b4df6b0c758550c26446f0559a271ad2:76641:55)
at DebugAppView._View_NyPmTrackerDetailsComponent0.destroyInternal (NyPmTrackerDetailsComponent.template.js:177:35)
at DebugAppView.AppView.destroyLocal (http://localhost:3000/packages/modules.js?hash=6111b8d7b4df6b0c758550c26446f0559a271ad2:11632:14)
at DebugAppView.destroyLocal (http://localhost:3000/packages/modules.js?hash=6111b8d7b4df6b0c758550c26446f0559a271ad2:11767:43)
at DebugAppView.AppView._destroyRecurse (http://localhost:3000/packages/modules.js?hash=6111b8d7b4df6b0c758550c26446f0559a271ad2:11621:14)
at DebugAppView.AppView._destroyRecurse (http://localhost:3000/packages/modules.js?hash=6111b8d7b4df6b0c758550c26446f0559a271ad2:11619:25)
at DebugAppView.AppView.destroy (http://localhost:3000/packages/modules.js?hash=6111b8d7b4df6b0c758550c26446f0559a271ad2:11607:14)
at ComponentRef_.destroy (http://localhost:3000/packages/modules.js?hash=6111b8d7b4df6b0c758550c26446f0559a271ad2:10280:82)
at RouterOutlet.unload (http://localhost:3000/packages/modules.js?hash=6111b8d7b4df6b0c758550c26446f0559a271ad2:21662:22)
at _LoadSegments.unloadOutlet (http://localhost:3000/packages/modules.js?hash=6111b8d7b4df6b0c758550c26446f0559a271ad2:19276:24)
I check line 10 of mycomponent it is like this:
<div class="col-sm-3">
<th-tracker-aside <======This would be line 10
[currentList]="currentList"
(selectItem)="onSelectItem($event)">
</th-tracker-aside>
</div>
So I go to th-tracker-aside which looks like this:
<aside class="th-aside-list th-tracker-aside th-section-bordered animated fadeIn">
<div class="th-aside-header-wrapper">
<h3>Navigate by</h3>
<select (change)="onChange($event.target.value)">
<option *ngFor="let navItem of _trackerService.navigateByList">{{navItem}}</option>
</select>
</div>
<div class="th-search-wrapper">
<md-input>
<span md-prefix><i class="fa fa-search th-search-icon" aria-hidden="true"></i></span>
</md-input>
</div>
<div class="th-aside-list-wrapper">
<div>
<h3>
All {{_trackerService.navigateByLabel}} <span
class="th-gray-text">(#####)</span>
</h3>
</div>
<ul>
<li *ngFor="let item of _trackerService.currentList"
(click)="changeSelectedItem(item)">
{{item.text}}
</li>
</ul>
</div>
Everything works fine except when clicking link to go outside of view.
The problem seems to have been fixed when I removed extends MeteorComponent from child view.

Getting the value from a button text for thyme leaf

Ok, I have this somewhat complex piece of HTML that I have to integrate with. It is a button with a drop down (using aria) and I had to pass in a currency list and be able to select one of the dropdown elements (currency values) and update the button text with the selected value. I write a tiny bit of js and that works well. I use thymeleaf to pass in values to populate and that works well. I also need to read the values that were set from the post to the spring mvc controller but I always get a empty string for the value that I set via js.
here is the javascript
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
var button = $("#currencyButton");
button.text(selText);
console.log("currency selected is:" + selText);
});
here is the html
<div class="col-sm-9 col-sm-offset-3 col-xs-12 form-row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
name="currencyButton"
th:field="${pals.selectedCurrency}"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
</div>
What I am trying to read back in the spring mvc controller is the pals.selectedCurrency value and it is always empty. Something I am missing? I was playing around and tried setting value and field. In reality I want to read the inline text that my js inserts.
I think you must add a th:fragment on you button and change the text of the button via ajax from backing bean from server, not from javascript. It's something like this :
<form th:action="#{/PersonEdit/save(contract=${param.contract})}" th:object="${personBean}"
method="POST" th:if="${param.contract != null}">
... other form components
<div class="form-group">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.tfoms}"></label>
<div class="col-sm-8">
<select class="form-control" th:field="*{tfoms}"
onchange="loadInsuranceCompanies()">
<option th:each="t : ${tfomses}"
th:value="${t.uidtfoms}"
th:text="${t.shortName}"
th:selected="${personBean.tfoms != null
and personBean.tfoms.equals(t)}"></option>
</select>
</div>
</div>
<div th:class="${#fields.hasErrors('insuranceCompany')}
? 'form-group has-error' : 'form-group'">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.ic}"></label>
<div class="col-sm-8" id="insuranceCompaniesContent">
<select class="form-control" id="insuranceCompany"
name="insuranceCompany"
th:fragment="insuranceCompany">
<option th:each="i : ${insuranceCompanies}"
th:value="${i.uidinsurancecompany}"
th:text="${i.shortName}"
th:selected="${personBean.insuranceCompany != null
and personBean.insuranceCompany.equals(i)}"></option>
</select>
<div th:if="${#fields.hasErrors('insuranceCompany')}"
th:each="err : ${#fields.errors('insuranceCompany')}">
<span class="text-danger" th:text="${err}"></span><br/>
</div>
</div>
</div>
In my case I refreshing one dropdown via another.Then refresh this fragment via ajax on item selection
function loadInsuranceCompanies() {
var url = [[#{/PersonEdit/insuranceCompanies}]];
if ($('#tfoms').val() !== '') {
url = url + '/' + $('#tfoms').val();
}
$("#insuranceCompaniesContent").load(url);
}
I think the trouble can be because you using not a standard select as a dropdown.
Ok, I figured out a relatively simple answer to it. I have to use the html that was provided because of look and feel considerations from the customer.
so what I did was add a hidden input and set that from the java script.
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
$("#currencyButton").text(selText);
$("#currencySelected").val(selText);
console.log("currency selected is:" + selText);
});
<input type="hidden"
id="currencySelected"
th:field="${pals.selectedCurrency}"/>
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
I see the correct values that were selected for my dropdown on the spring mvc controller and now I can get on with the rest of the stuff.

Create custom portelt - mixture of news and events

I'm trying to create a custom portelt which displays news or event items based on a keyword. I don't want to use the collects portlet facility. I've created a Python Script which fetches the necessary results like this:
from Products.CMFCore.utils import getToolByName
portal_catalog = getToolByName(context, 'portal_catalog')
return portal_catalog.searchResults(
Subject = 'Startseite',
end={'query': DateTime(),
'range': 'min'},
sort_on='start',
sort_limit=3,
review_state='external')[:5]
So this should fetch all objects with the review_state 'external' and the keyword (or subject) 'Startseite'. Now I've created a page template which is used to render a classic portelt:
<html xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
i18n:domain="plone">
<body>
<div metal:define-macro="portlet"
tal:define="view context/##events_view;
results context/startpage_informations;
events_link view/all_events_link;
prev_events_link view/prev_events_link"
tal:condition="results">
<dl class="portlet" id="portlet-events">
<dt class="portletHeader">
<span class="portletTopLeft"></span>
<a href=""
tal:attributes="href events_link"
class="tile">
Wichtige Neuigkeiten:
</a>
<span class="portletTopRight"></span>
</dt>
<tal:events tal:repeat="obj results">
<dd class="portletItem"
tal:define="oddrow repeat/obj/odd"
tal:attributes="class python:test(oddrow, 'portletItem even', 'portletItem odd')">
<a href="#"
class="tile"
tal:attributes="href obj/getURL;
title obj/Description">
<img src="#" alt="" tal:replace="structure here/news_icon.gif" />
<span tal:replace="obj/pretty_title_or_id">
Some Event
</span>
<span class="portletItemDetails"
tal:define="starts python:toLocalizedTime(obj.start, long_format=1);
ends python:toLocalizedTime(obj.end, long_format=1);
startTime python:toLocalizedTime(obj.start,time_only=1);
endTime python:toLocalizedTime(obj.end,time_only=1);
startDay python:toLocalizedTime(obj.start, long_format=0);
endDay python:toLocalizedTime(obj.end, long_format=0);">
<span>
<tal:condition condition="obj/location">
<tal:location content="obj/location">Location</tal:location>,<br />
</tal:condition>
<tal:sameday tal:condition="python:startDay==endDay">
<span tal:condition="startDay" tal:replace="startDay">:[If this is an event, show its start time and date]</span><br />
Uhrzeit: <span tal:condition="startTime" tal:replace="startTime">[If this is an event, show its start time and date]</span> -
<span tal:condition="endTime" tal:replace="endTime">[If this is an event, show its start time and date]</span>
</tal:sameday>
<tal:multiday tal:condition="python:startDay!=endDay">
Vom <span tal:condition="starts" tal:replace="starts">[If this is a multi-day event, show its start date]</span><br />bis
<tal:hasendday tal:condition="ends">
<span tal:replace="ends">[If this is a multi-day event, show its end date]</span>
</tal:hasendday>
</tal:multiday>
</span>
</span>
</a>
</dd>
</tal:events>
</dl>
</div>
</body>
</html>

jQuery UI - Multiple serialized .selectable lists

I'm making a error report handling system, and I'm trying to use jQuery UI .selectable to get all the reports a user has clicked, but the reports are grouped in lists based on the system they come from. Multiple lists can be selected from at the same time.
As in the linked demo, I'm currently just printing out IDs, which works fine for a single list. However, when I'm selecting items from two or more different lists, the IDs that are already listed disappear. They seem to still be selected in .selectable's eyes, but they don't get printed anymore.
Every time I click on a different list, the previous IDs disappear and the new ones appear.
Does anyone have any idea what I can do to get everything printed?
Also, is there any way to apply the .ui-selected class to elements, given a string/array of values that are supposed to be selected? Basically, the opposite of this script's functionality. (If that made any sense..?)
JSFiddle here: http://jsfiddle.net/Kantana/Z3SBU/1/
Javascript
$(function() {
$(".selectable").bind("mousedown", function(event) {
event.metaKey = true;
}).selectable({
stop: function() {
var result = $("#selectedItems").empty();
$(".ui-selected", this).each(function() {
var itemId = $(this).attr('id');
var item = itemId.replace("report_", "");
result.append(" #" + item);
});
}
});
})
CSS
This example mainly uses the Twitter Bootstrap CSS.
HTML
<span id="selectedItems">None selected</span>
<div class="accordion" id="accordion2">
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#1'>System 1 - All responding</a>
</div>
<div id='1' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_60'>
Error #60 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unconfirmed_down</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#2'>System 2 - All responding</a>
</div>
<div id='2' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_62'>
Error #62 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unconfirmed_down</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#3'>System 3 - All responding</a>
</div>
<div id='3' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_56'>
Error #56 - Responding
<p class='tinytext'>Check type: Free Memory</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
<li class='report file ui-widget-content' id='report_57'>
Error #57 - Responding
<p class='tinytext'>Check type: SSH</p>
<p class='tinytext'>Error message: CRITICAL - Socket timeout after 10 seconds</p>
<li class='report file ui-widget-content' id='report_55'>
Error #55 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: PING CRITICAL - Packet loss = 100%</p>
<li class='report file ui-widget-content' id='report_54'>
Error #54 - Responding
<p class='tinytext'>Check type: Free Space All Disks</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
<li class='report file ui-widget-content' id='report_58'>
Error #58 - Responding
<p class='tinytext'>Check type: Load Average</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#4'>System 4 - 1 error</a>
</div>
<div id='4' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_59'>
Error #59 - Warning
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unknown</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#5'>System 5 - 1 error</a>
</div>
<div id='5' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_61'>
Error #61 - Warning
<p class='tinytext'>Check type: Free Space All Disks</p>
<p class='tinytext'>Error message: DISK WARNING - free space: / 11230 MB (15% inode=78%): /dev 989 MB (99% inode=99%): /run 398 MB (99% inode=99%): /run/lock 5 MB (100% inode=99%): /run/shm 997 MB (100% inode=99%):</p>
</li>
</ol>
</div>
</div>
</div>
</div>
Change the scope of the stop function select the ui-selected elements within the entire accordion. Specifying $(".ui-selected", this) only looks at the single item that was selected since this contains a reference to the selectable.
stop: function() {
var result = $("#selectedItems").empty();
//changed from this to #accordion
$(".ui-selected", $("#accordion2")).each(function() {
var itemId = $(this).attr('id');
var item = itemId.replace("report_", "");
result.append(" #" + item);
});
}
Working Example http://jsfiddle.net/Z3SBU/2/

Stars and aggregated rating are not shown when using schema.org markup and and Review in xhtml page

I'm trying to implement schema.org's microData format in my xhtml template.
Since I'm using xhtml templates, I needed to add
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
instead of:
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
otherwise my template wouldn't be parsed. I found the solution here
My markup looks like this:
<div itemscope="itemscope" itemtype="http://schema.org/Place">
<div itemprop="aggregateRating" itemscope="itemscope"
itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">#{company.meanRating}</span> stars -
based on <span itemprop="reviewCount">#{company.confirmedReviewCount}</span> reviews
</div>
<ui:repeat var="review" value="#{company.reverseConfirmedReviews}">
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
<span itemprop="name">Not a happy camper</span> -
by <span itemprop="author">#{review.reviewer.firstName}</span>,
<div itemprop="reviewRating" itemscope="itemscope" itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">#{review.text} </span>
</div>
</ui:repeat>
</div>
When testing this in http://www.google.com/webmasters/tools/richsnippets I'm not getting any stars back or aggregated review count
What am I doing wrong here?
Yes!!
The problem actually consisted of two errors, first somebody had named the div class to
"hReview-aggregate" which is appropriate when you implement Microformats not
Microdata
The second error was that I misunderstood the specification of schema.org.
This is how I end up doing:
<div class="box bigBox" itemscope="itemscope" itemtype="http://schema.org/LocalBusiness">
<span itemprop="name">#{viewCompany.name}</span>
<div class="subLeftColumn" style="margin-top:10px;" itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
<div class="num">
<span class="rating" id="companyRating" itemprop="ratingValue">#{rating}</span>
</div>
<div>Grade</div>
<div class="num">
<span class="count" id="companyCount" itemprop="reviewCount">
#{confirmedReviewCount}
</span>
</div>
</div>
</div>
Hope this helps!!!!!
hey checkout how holidayhq guys have done it for this url : www.holidayiq.com/destinations/Lonavala-Overview.html
you can check there snippet on this tool : http://www.google.com/webmasters/tools/richsnippets
and google out this keyword "lonavala attractions" and you will see the same snippet, they have used microdata to generate this reviews in snippet, they have used typeof="v:Review-aggregate" and much more tags, have a look at it, its nice implementation of the reviews in snippet kind of work.

Resources