I have a print button that am using an {{#if}} conditional to show when a box gets expanded. I want the box to be expanded and then show the print icon at the foot of the box. But for some reason it is getting rendered early and shown in line with the collapsed box then put in the right place once the box is fully expanded. Here is my code:
Print Icon Template:
{{#if view.showPrintButton}}
<div class="print pull-right">
Print Discussion<i class="fa fa-print"></i>
</div>
{{/if}}
Box template:
{{#if permissions.comment}}
<div {{bindAttr class="controller.audienceIsShared:shared view.commentEditorExpanded:expanded :createComment"}}>
<div class="author-image-container content">
<img src="{{unbound Informal.Registry.user.pictureUrl}}" class="author-image pull-left" />
</div>
{{#if view.commentEditorExpanded}}
<div class="comment-editor-container content">
<div class="boxSizingDefault text">
{{
view view.commentEditorClass
disabledBinding="view.commentFormDisabled"
viewName="commentEditor"
valueBinding="controller.commentInProgress.initialBody"
attachmentsBinding="controller.commentInProgress.attachments"
}}
</div>
{{#if controller.audienceIsShared}}
<div class="contextualMessage">This comment will be seen across business units</div>
{{/if}}
</div>
{{#if notificationRecipients.length}}
<div class="notificationRecipients small detail">
<span>These subscribers will be notified of your comment:</span>
{{#if notificationRecipientsIsExpandable}}
{{#if view.notificationRecipientsExpanded}}
{{#with sortedNotificationRecipients}}{{> initials}}{{/with}}
{{else}}
{{#with collapsedNotificationRecipients}}{{> initials}}{{/with}}
<span class="link" {{action "expandNotificationRecipients" target="view"}}>
, {{collapsedNotificationRecipientsRemainingCount}} more...
</span>
{{/if}}
{{else}}
{{#with sortedNotificationRecipients}}{{> initials}}{{/with}}
{{/if}}
</div>
{{/if}}
View:
showPrintButton: function () {
return (this.get("expanded") !== false) && !this.get("editorExpanded");
} .property("expanded", "editorExpanded")
Thanks!
Related
I'm building a page where the user can expend categories like an accordion.
I've been helped so for and I'm still trying to dismiss the fog here.
I'm having this issue with my slots :
'v-slot' directive must be owned by a custom element, but 'div' is not.
I've been checking the doc, but I can't seem to understand much...
<div v-for="(filteredArticles, categoryKey) in groupedCategories" :key="categoryKey" class="l">
<Item>
<template #title>
<a> {{ categoryKey }} </a>
</template>
<div v-for="article in filteredArticles" :key="article.slug">
<template #content> <!-- here is the issue -->
<p> bonjour monde</p>
<img :src="require(`assets/${article.img}`)" alt="">
</template>
</div>
</Item>
</div>
I've nested the template #content inside a div in order to dynamically fetch from an array.
Here is Item.vue
<template>
<div class="wrapper">
<div
:class="{ active: isActive }"
#click="toggle"
>
<a class="title">
<slot name="title" />
</a>
<div v-show="show" :class="{ active: isActive }" class="content">
<slot name="content" />
</div>
</div>
</div>
</template>
Well, I am making a simple left panel menu. What I want to do is to make sub-menu visible even after refresh when the category is active.
Example:
-Users
-Dashboard
-Blog
-----articles
-----new article
I am on articles si I can see entire submenu even after refreshing of the website.
I make it works this way.
Handlebars menu
<div class="blog-tab {{#if active.blog}}admin-panel-active-tab{{/if}}" id="blog-tab">
<a>
<i class="fas fa-pen"></i>Blog
<i class="fas fa-caret-down admin-panel-item-dropdown"></i>
</a>
</div>
<div id="blog-sub-tab" class="toggleable-tab">
<div class="sub-toggleable-tab">
<div class="{{#if active.posts}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Articles</div>
<div class="{{#if active.newPost}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Create new article</div>
</div>
</div>
<div class="eshop-tab {{#if active.eshop}}admin-panel-active-tab{{/if}}" id="eshop-tab">
<a><i class="fas fa-store"></i>Eshop
<i class="fas fa-caret-down admin-panel-item-dropdown"></i>
</a>
</div>
<div id="eshop-sub-tab" class="toggleable-tab">
<div class="sub-toggleable-tab">
<div class="{{#if active.eshopCatalog}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Catalog</div>
<div class="{{#if active.createNewProduct}}admin-panel-active-tab{{/if}}"><i
class="fas fa-circle"></i>Create new product</div>
<div class="{{#if active.eshopOrders}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Orders</div>
</div>
</div>
Handlebars make it scrolled.
{{#if active.blog}}
<script>$("#blog-sub-tab").slideToggle(0);</script>
{{/if}}
{{#if active.eshop}}
<script> $("#eshop-sub-tab").slideToggle(0);</script>
{{/if}}
I am passing to every subcategory active.blog or active.tab so it's easy.
But now I am using webpack and cant use jquery when its frontend rendered.
Yes, it can be fixed... But I am looking for any better way how to do it.
That can be done only in js(with jquery) without handlebars. Thank for any help.
I have just inherited a project that uses the three frameworks mentioned above. Here's a snippet of my template:
<div class="content-header">
<div class="content-header-title">move money to</div>
<div class="content-header-controls">
<dl>
<dd>
<a id="aMoveMoneyCancel">back</a>
</dd>
</dl>
</div>
</div>
<div class="content-edge">
<ul class="triangle-breadcrumb margin-bottom">
<li class="active"><a>DETAILS</a></li>
<li><a>REVIEW</a></li>
<li><a>DONE</a></li>
</ul>
<div class="content-section">
<div class="content-section-header">
<div class="section-title">
move money to...
</div>
</div>
<div class="content-section-body padding">
<form id="moveMoneyToForm">
<input type="hidden" name="moveMoneyToPayeeDocument.FromAccount"
value="{{moveMoneyToPayeeDocument.FromAccount}}" class="required"/>
<div class="accounts">
<div class="planted-stop"> </div>
<div class="sub-section major from-account">
<div class="sub-section-account-header">from account</div>
<div class="sub-section-account-body">
<div id="fromCarouselContainer" class="from-account">
<!--carousel slide generated dynamically-->
<!--moveMoneyTo.accountsCarousel.template-->
</div>
</div>
</div>
<!--<input type="hidden" name="moveMoneyToPayeeDocument.ToAccount" value="{{moveMoneyToPayeeDocument.ToAccount}}" />-->
<div id="toAccountContainer" class="to-account">
{{#if isIrdPayment}}
{{> app_templates_irdPayment.carouselDetail.template}}
{{else}}
{{> app_templates_moveMoneyTo.toAccount.template}}
{{/if}}
</div>
<div class="planted-stop"> </div>
<span class="stretch"></span>
</div>
<div class="sub-sections-container">
<div class="sub-sections-shield"></div>
{{#if isIrdPayment}}
{{> app_templates_irdPayment.amountDescription.template}}
{{else}}
{{#with moveMoneyToPayeeDocument}}
<div class="sub-section major">
<div class="sub-section-header">AMOUNT</div>
<div class="sub-section-body">
<input id="amount" name="moveMoneyToPayeeDocument.Amount"
type="text" step="0.01"
placeholder="Amount" value="{{unformatCurrency Amount}}"
class="required number amount-input"/>
</div>
</div>
<div class="sub-section major">
<div class="sub-section-header">Description</div>
<div class="sub-section-body" id="divDescriptionContainer">
{{> app_templates_moveMoneyTo.description.template}}
</div>
</div>
{{/with}}
{{/if}}
{{#with moveMoneyToPayeeDocument}}
<div class="sub-section major">
<div class="scheduling">
<div class="sub-section-header">SCHEDULING</div>
<div class="sub-section-body">
<div class="transfer-date">
<div id="divTransferDate"
class="input-section move-money-to-recurring-section {{#if isRecurring}} collapse {{else}} in collapse {{/if}}"
{{#unless isRecurring}} style="height: auto;" {{/unless}}>
<div>
<label for="date">Transfer date</label>
<input id="date" class="date-input" type="text" placeholder="Date"
min="{{today this}}"
data-date-min="{{today this}}"
value="{{formatDate TransferDate 'input'}}"/>
</div>
</div>
<div class="input-section last">
<div>
<label class="checkbox">
<input id="recurringTransaction" type="checkbox"
data-target=".move-money-to-recurring-section" data-toggle="collapse"
{{#if isRecurring}} checked="checked" {{/if}}
> Recurring transaction
</label>
</div>
</div>
<div id="divSchedulingDetails" class="move-money-to-recurring-section {{#if isRecurring}} in collapse {{else}} collapse {{/if}} ">
{{#with ScheduleDetails}}
<div id="recurringSection">
{{> app_templates_moveMoneyTo.scheduling.template }}
</div>
{{/with}}
</div>
</div>
</div>
</div>
<div class="buttons-container">
<button id="next" class="btn btn-item btn-primary" disabled="disabled">NEXT</button>
<button id="cancel" class="btn btn-item btn-dark">BACK</button>
</div>
{{/with}}
</div>
</form>
</div>
</div>
</div>
In Chrome this was not working properly, only in Chrome. For some reason the URL it navigated to had a whole bunch of query parameters inserted in the middle. I assume that stuffed up the routing because it went to the view it was supposed to render, but then came back and re-rendered this form again! This is only in Chrome, I couldn't reproduce it in FF or IE9 (haven't tried other versions).
Having gone back through revision history I discovered this form used to look like this:
<div class="content-header">
<div class="content-header-title">move money to</div>
<div class="content-header-controls">
<dl>
<dd>
<a id="aMoveMoneyCancel">back</a>
</dd>
</dl>
</div>
</div>
<div class="content-edge">
<ul class="triangle-breadcrumb margin-bottom">
<li class="active"><a>DETAILS</a></li>
<li><a>REVIEW</a></li>
<li><a>DONE</a></li>
</ul>
<div class="content-section">
<div class="content-section-header">
<div class="section-title">
move money to...
</div>
</div>
<div class="content-section-body padding">
<form id="moveMoneyToForm">
<input type="hidden" name="moveMoneyToPayeeDocument.FromAccount"
value="{{moveMoneyToPayeeDocument.FromAccount}}" class="required"/>
<div class="accounts">
<div class="planted-stop"> </div>
<div class="sub-section major from-account">
<div class="sub-section-account-header">from account</div>
<div class="sub-section-account-body">
<div id="fromCarouselContainer" class="from-account">
<!--carousel slide generated dynamically-->
<!--moveMoneyTo.accountsCarousel.template-->
</div>
</div>
</div>
<!--<input type="hidden" name="moveMoneyToPayeeDocument.ToAccount" value="{{moveMoneyToPayeeDocument.ToAccount}}" />-->
<div id="toAccountContainer" class="to-account">
{{#if isIrdPayment}}
{{> app_templates_irdPayment.carouselDetail.template}}
{{else}}
{{> app_templates_moveMoneyTo.toAccount.template}}
{{/if}}
</div>
<div class="planted-stop"> </div>
<span class="stretch"></span>
</div>
<div class="sub-sections-container">
<div class="sub-sections-shield"></div>
{{#if isIrdPayment}}
{{> app_templates_irdPayment.amountDescription.template}}
{{else}}
{{#with moveMoneyToPayeeDocument}}
<div class="sub-section major">
<div class="sub-section-header">AMOUNT</div>
<div class="sub-section-body">
<input id="amount" name="moveMoneyToPayeeDocument.Amount"
type="text" step="0.01"
placeholder="Amount" value="{{unformatCurrency Amount}}"
class="required number amount-input"/>
</div>
</div>
<div class="sub-section major">
<div class="sub-section-header">Description</div>
<div class="sub-section-body" id="divDescriptionContainer">
{{> app_templates_moveMoneyTo.description.template}}
</div>
</div>
{{/with}}
{{/if}}
{{#with moveMoneyToPayeeDocument}}
<div class="sub-section major">
<div class="sub-section-header">SCHEDULING</div>
<div class="sub-section-body">
<div class="transfer-date">
<div id="divTransferDate"
class="input-section move-money-to-recurring-section {{#if isRecurring}} collapse {{else}} in collapse {{/if}}"
{{#unless isRecurring}} style="height: auto;" {{/unless}}>
<div>
<label for="date">Transfer date</label>
<input id="date" class="date-input" type="text" placeholder="Date"
min="{{today this}}"
data-date-min="{{today this}}"
value="{{formatDate TransferDate 'input'}}"/>
</div>
</div>
<div class="input-section last">
<div>
<label class="checkbox">
<input id="recurringTransaction" type="checkbox"
data-target=".move-money-to-recurring-section" data-toggle="collapse"
{{#if isRecurring}} checked="checked" {{/if}}
> Recurring transaction
</label>
</div>
</div>
<div id="divSchedulingDetails" class="move-money-to-recurring-section {{#if isRecurring}} in collapse {{else}} collapse {{/if}} ">
{{#with ScheduleDetails}}
<div id="recurringSection">
{{> app_templates_moveMoneyTo.scheduling.template }}
</div>
{{/with}}
</div>
</div>
</div>
{{/with}}
</div>
</form>
</div>
<div class="buttons-container">
<button id="next" class="btn btn-item btn-primary" disabled="disabled">NEXT</button>
<button id="cancel" class="btn btn-item btn-dark">BACK</button>
</div>
</div>
</div>
The difference being the location of the buttons were located outside the form and {{with}} blocks. The Backbone view has
'click #next': 'onNext'
I assume this is the click event handler binding? It seems to be bound by id, which I understand means it should not matter where the button lives. Unless... one of the bootstrap classes has specific meaning, and acts as a form submit?
I am new to the Backbone/Handlebars/Bootstrap combo, so I hope I have explained myself reasonably well.
The buttons are inside the form element, quick guess is they are submitting the form!
Add button type as follows :
<button type='button'>
Reference :
https://stackoverflow.com/a/9315482/566092
For a bootstrap carousel item <div class="item"> the first item needs to be active
div class="item active"> though only the first the item
Thought to write a Handlebars Helper, to loop through like this:
<div class="item active">
<div class="foo">{{foo.[0]}}</div>
</div>
{{#each resArray foo}}
<div class="item">
<div class="foo">{{this}}</div>
</div>
{{/each}}
..though how would this be written correctly?
Handlebars.registerHelper("resArray", function(array) {
return array[1 to array.length];
});
Also, where would this helper go? ..in my node server.js file where Handlebars is assigned?
Turns out it's as easy as:
{{#each foo}}
{{#if #first}}
<div class="item active">
<div class="foo">{{this}}</div>
</div>
{{else}}
<div class="item">
<div class="foo">{{this}}</div>
</div>
{{/if}}
{{/each}}
Use the following code:
{{#each foo}}
<div class="item {{#if #first}}active{{/if}}">
<div class="foo">{{this}}</div>
</div>
{{/each}}
I recently went from ember rc8 to 1.0.0 and to ember-data beta-2. When I did this, there were several error messages but this one I cannot figure out:
Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.
I am currently in the process of getting into a jsbin to debug but in the meantime I created this album to demonstrate what is going on : Album
Here is the Route when the error is displayed:
App.BadgeBasicRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('badge');
}
})
and its parent route:
App.BadgeRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('badge',params.badge_id);
},
afterModel: function(params) {
return this.transitionTo('badge.basic', params)
}
});
and here are the templates:
BadgeBasic.hbs
<div class="row">
<div class="col col-lg-12">
<h3>Basic Info</h3>
<hr>
<div class="row page-header-title">
<div class="col col-lg-11">
<h4>Tag Line</h4>
</div>
{{! test comment }}
{{#view App.EditTagLineView}}
<h4 {{bindAttr class=":glyphicon isEditingTagLine:glyphicon-nothing:glyphicon-pencil :edit-button"}}></h4>
{{/view}}
</div>
<p>
{{#if isEditingTagLine}}
{{view Ember.TextField valueBinding="short_description" class="form-control" style="padding-top:10px"}}
<hr>
<button {{action saveTagLine}} class="btn btn-success">Save</button>
{{else}}
{{#if short_description}}
{{short_description}}
{{else}}
No tag line provided
{{/if}}
{{/if}}
</p>
<div class="row page-header-title">
<div class="col col-lg-11">
<h4>
Description
</h4>
</div>
{{#view App.EditDescriptionView}}
<h4 {{bindAttr class=":glyphicon isEditingDescription:glyphicon-nothing:glyphicon-pencil :edit-button"}}></h4>
{{/view}}
</div>
<p>
{{#if isEditingDescription}}
{{view Ember.TextArea valueBinding="full_description" class="form-control" rows="6"}}
<hr>
<button {{action saveDescription}} class="btn btn-success">Save</button>
<span class="glyphicon glyphicon-info-sign"></span> More on Markdown
{{else}}
{{#if full_description}}
{{markdown full_description}}
{{else}}
<span class="text-muted">no description provided</span>
{{/if}}
{{/if}}
</p>
</div>
</div>
<div class="row page-header-title" >
<div class="col col-lg-11">
<h4>
Mentor
</h4>
</div>
<div class="col col-lg-1">
<h4 class="glyphicon glyphicon-pencil edit-button"></h4>
</div>
</div>
{{#if mentor}}
<address>
{{log mentor}}
<strong> {{mentor.employee_preferred_name}}</strong>
<br>
{{#if mentor.phone}}
<abbr title="Phone">P:</abbr> {{mentor.phone}} <br>
{{else}}
<small> no phone number provided </small> <br>
{{/if}}
{{#if mentor.email}}
<abbr title="Email">E:</abbr> {{mentor.email}}
{{else}}
<small> no email number provided </small> <br>
{{/if}}
</address>
{{/if}}
</div>
Category.hbs
<div class="col col-lg-3 menu2">
<ul style="">
<li class="menu2-header">
<button style="background:#5E9EF3;border:none" class="btn btn-sm btn-primary">New</button>
</li>
{{#each badge in badges}}
{{#link-to "badge" badge tagName="li"}}
<h6 style="">
{{badge.type}}
</h6>
<h4 style="">
<strong>{{badge.title}}</strong>
</h4>
<p>
{{badge.short_description}}
</p>
{{/link-to}}
{{else}}
<p class="lead text-center" style="margin-top:2em">
No Badges in {{label}}
</p>
{{/each}}
</ul>
</div>
<div class="col col-lg-7">
{{outlet}}
</div>
Categories.hbs
<div class="col col-lg-2 menu1">
<ul>
{{#each category in model}}
{{#if category.parent}}
{{else}}
<li class="menu1-header" > {{category.label}} </li>
{{#if category.children}}
{{#each child in category.children}}
{{#link-to 'category' child tagName="li"}}
{{child.label}}
{{/link-to}}
{{/each}}
{{/if}}
{{/if}}
{{/each}}
</ul>
</div>
{{outlet}}
Let me know if you need any other information. Any help would be greatly appreciated.
I've run into this a time or two in the past and it's almost always been due to wrapping some handlebars directive in regular html comments. Something like:
<!--
{{#if something}}hey!{{else}}ho!{{/if}}
-->
I ended up rebuilding the badgeBasic.hbs file and it turns out there were unmatched html tags. I do not know why this fixed it but it did.