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.
Related
I have a filter search that shows matching strings of an array in a list when user types. When the user clicks on one item of the list, a method should fire. Everything works fine, but the problem is that it doesn't fire on first click but a on a second attempt on the same item of the list or any other it works. I can't figure out why is this happening. Here's my code.
<div
class="filter-form"
:class="{'visible': filterVisibility[index]}"
v-if="col.filter"
>
<div class="input-group">
<input
type="text"
class="form-control"
#keyup="filterColumn($event, index)"
#blur="toggleFilter(index)"
>
<button
class="btn btn-secondary"
type="button"
#click="toggleFilter(index)"
>Filtrar</button>
</div>
<ul class="filter-matches list-group">
<li
class="list-group-item"
v-for="match of filteredMatches"
:key="match"
#click="clickFilteredMatch(String(match), index)"
>{{match}}</li>
</ul>
</div>
I am trying bind a razor variable to html attribute with vuejs.
The variable which i must use is "#culture". It is a string variable which gives me current culture information.
My code is:
<div class="dropdown-product-item" v-for="(item, index) in card.items">
<span class="dropdown-product-remove"><i class="icon-cross" v-bind:data-id="item.Id" v-on:click="removeFromCard"></i></span>
<a class="dropdown-product-thumb" v-bind:href="/#{Html.Raw(culture);}/item.Link">
<img v-bind:src="item.ResimUrl" v-bind:alt="item.Ad">
</a>
<div class="dropdown-product-info">
<a class="dropdown-product-title" v-bind:href="/#{Html.Raw(culture);}/item.Link">{{item.Ad}}</a>
<span class="dropdown-product-details" v-if="!item.IndirimliFiyat">{{pieces[index]}} x {{item.Fiyat.PriceString}}</span>
<span class="dropdown-product-details" v-else>{{pieces[index]}} x {{item.IndirimliFiyat.PriceString}}</span>
</div>
This code doesn't work. I only see white screen.
How to I do this? Could you help me?
I'm creating a form in thymeleaf that contains a file upload field that's not part of my model.
When I load the page, thymeleaf complains and throws NotReadablePropertyException for that field.
How can I get thymeleaf to ignore the fact that the field does not exist on the model?
Code:
<div class="form-group"
th:classappend="${#fields.hasErrors('uploadFile')}? 'has-error'">
<label class="col-sm-12 control-label" style="text-align: left; margin-bottom: 7px;">Upload Photo</label>
<div class="col-sm-12" style="margin-bottom:5px;">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="uploadFile" accept="image/*" required>
</span>
Remove
</div>
<p id="error" style="position:absolute;color:#FF0000;margin-top:-7px"></p>
</div>
</div>
Error:
org.springframework.beans.NotReadablePropertyException: Invalid property 'uploadFile' of bean class [bean.Library]: Bean property 'uploadFile' is not readable or has an invalid getter method: Does the return type of the getter match the parameter type of the setter?
the error that you get is because of the line
th:classappend="${#fields.hasErrors('uploadFile')}
that expects a field expression as a parameter.
You can replace
th:classappend="${#fields.hasErrors('uploadFile')}
with
th:classappend="${#fields.hasErrors('*')}
where the has-error class will appear if there is an error with any of the fields.
Or you can even replace it with
th:classappend="${#fields.hasErrors('global')}
that is not associated with any specific field in the form.
Or alternatively, you can add the field (uploadFile) in the model as a transient attribute.
I need to make reactive a class inside a const (exported from a module).
export const messageControls = '
<div id="controls"">
<i id="idcont" class="{{starred}}"></i>
</div>
'
This class belongs to an HTML block who's inserted as innerHTML of a createElement.
var newElement = document.createElement('div');
newElement.id = i._id;
newElement.className = "single_message";
newElement.innerHTML = messageControls;
document.getElementById('conversation_details').appendChild(newElement);
The {{helper}} below is not rendering anything :
starred: function () {
return 'bob';
},
<i id="idcont" class="{{starred}}"></i> gives {{starred}} in plain text
<i id="idcont" class=" ' + {{starred}} + ' "></i> breaks all
Any idea?
Update - full Blaze template as requested
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
<div class="item-content">
<div class="task_inlist">
<div class="task_from">
{{{from}}}
</div>
<div class="task_date">
{{initialdate}}
</div>
<div class="task_subject">
{{{subject}}}
</div>
<div class="task_content">
{{{htmlbody}}}
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
</div>
<div id="conversation_details" class="col-xs-8" media="print">
<!--
here are each selected message details
-->
</div>
</div>
</template>
You're trying to inject spacebars template markup directly into the DOM but meteor-blaze wants to use spacebars to build the DOM. It doesn't watch the DOM for arbitrary changes and then make template substitutions inside of it!
You can instead use Meteor's reactivity to automatically insert new items into the DOM for you based on changes to the underlying data. In your case it looks like you're trying to show the details of a message that's been clicked on. You probably have a template event handler already to catch the click. In that template handler you can set a Session variable which indicates which message is currently selected and then use that Session variable inside the helper that renders the message details.
For example:
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
// render summary of each message
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
{{#with selectedMessage}}
<div id="conversation_details" class="col-xs-8" media="print">
// render selected message details
</div>
{{/with}}
</div>
</template>
Your js:
Template.inbox.events({
'click .item'(ev) {
Session.set('selectedMessageId',this._id);
}
});
Template.inbox.helpers({
selectedMessage() {
return Messages.findOne(Session.get('selectedMessageId'));
}
});
Now to your follow-up question about how to reactively style an element. Let's say your message* object has aisStarredboolean key. In the message detail section we've set the data context using{{#with currentMessage}}` so any key of the current message can be used directly in our spacebars template. Where you are displaying the message details you can do:
<div id="controls"">
<i id="idcont" class="{{#if isStarred}}starred{{/if}}"></i>
</div>
Depending on whether or not the message is starred this will render as class="" or class="starred".
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>