I'm migrating some code to blaze and have hit a problem with the bootstrap carousel that I can't seem to get over.
I had the following pre blaze to set one of the carousel items active to kick the whole thing off
<div class="item {{#if active_sponsor}}active{{/if}}">
As documented, this no longer works with blaze, so I've tried modifying it to the only thing I can think of which is
{{#if active_sponsor}}
<div class="item {{#if active_sponsor}}active{{/if}}">
{{else}}
<div class="item">
{{/if}}
This all lives within an {{each sponsors}} block.
Sadly, this fails to run with an error saying unexpected {{else}} (or, if I remove the {{else}} unexpected {{/if}}
What's the correct way to do this. I'm using exactly the same pattern earlier to change a
From "Using Blaze" on github :
https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected
So you should use this form instead, assuming that active_sponsor is the property to look for in the current data context.
Template.whatever.helpers({
isActive:function(){
return this.active_sponsor?"active":"";
}
});
<div class="item {{isActive}}">
</div>
Related
I'm not sure if this is a Meteor issue or a generic one but I have the following code in my app.
<template name='admin'>
<div class='admin container-fluid noPadding'>
{{#if isInRole 'Admin'}}
<h3 class="homepageText">Server Statistics</h3>
{{> serverFacts}}
{{else}}
You don't belong here!
{{/if}}
</div>
When the page renders I see "You don't belong here!", then "Server Statistics" replaces it a second or so later. I have the same problem other places in my app always with a Blaze {{#if ...}} involved. Is there a way to stop the page from displaying in the browser until the rendering has completed and settled down?
This is a generic issue with reactive applications - rendering often happens while the data is still being pushed to the client. The normal solution is to use a spinner (ex: sacha:spin) until the underlying subscription(s) are ready. Then in Blaze you end up with:
<template name='admin'>
{{#if loading}}
{{> spin}}
{{else}}
<div class='admin container-fluid noPadding'>
{{#if isInRole 'Admin'}}
<h3 class="homepageText">Server Statistics</h3>
{{> serverFacts}}
{{else}}
You don't belong here!
{{/if}}
{{/if}}
</div>
You'll need a helper to compute loading based on your subscriptions. In a more complicated layout backed by several subscriptions you might end up with more than one spinner spinning at a time.
In my Stencil theme, I am including a few different size charts for products which I intend to include by just changing the path to the size chart document. I found dynamicComponent in the Stencil docs and I thought I understood the way it worked. In my higher level partial, I am binding the string to component in this way - (product.html)
<div class="container" itemscope itemtype="http://schema.org/Product">
{{> components/products/product-view schema=true sizeChart='components/products/size_charts/tshirt.html'}}
{{#if product.videos.list.length}}
{{> components/products/videos product.videos}}
{{/if}}
{{#if settings.show_product_reviews}}
{{> components/products/reviews reviews=product.reviews product=product urls=urls}}
{{/if}}
</div>
(product-view.html)
{{#if sizeChart}}
<div class="tab-content" id="tab-sizeChart">
{{dynamicComponent sizeChart}}
</div>
{{/if}}
Where all I wish to change is the variable sizeChart in future theme maintenance. When the page renders, the place where I wrote the dynamicComponent is blank.
I used if conditionals instead of dynamicComponent. It wasn't what I thought it was.
I am using iron-router, i have a route "models" which has a list of items. When the user clicks one of these items a new route "model" is used, the name of the selected item is passed as a param and used to load data about that model from the database.
I want to use slick carousel, using an array of images returned from the database (based on the param).
<div id="carousel">
{{#each images}}
<div class="item">
<img src="/images/{{this}}" alt="">
</div>
{{/each}}
</div>
Where should I call the slick init?
Generally speaking, you should initialize plugins in a template's onRendered callback. In your case, that won't work because onRendered will fire before any of the images are inserted into the DOM. With other carousel plugins I've seen, the following strategy works:
Move each item to its own template (carouselItem).
Add an onRendered callback to carouselItem so that the plugin will be initialized after each item is added to the DOM.
I haven't tried this with slick carousel, but it would look something like this:
<template name="carousel">
<div id="carousel">
{{#each images}}
{{> carouselItem}}
{{/each}}
</div>
</template>
<template name="carouselItem">
<div class="item">
<img src="/images/{{this}}">
</div>
</template>
Template.carouselItem.onRendered(function() {
$('#carousel').slick();
});
Assuming slick carousel can be initialized multiple times, this approach should work. Be aware that one possible downside is that the plugin will refresh whenever images is updated. One way to fix that is to use the {reactive: false} option in your find.
Usually you would call a plugin on an element in Template.myTemplate.onRendered:
Template.xxx.onRendered(function() {
$('#carousel').slick();
});`
What is the least code / very simple way to dynamically show a html element "the meteor way"? Jquery.show() is very simple but doesn't work and it seems odd that Meteor way requires lines and lines of code? Any suggestions welcome!
Use UI.dynamic. There's a really good example of how to do it in this post on creating a simple modal. Here are the relevant snippets:
<template name="modal">
{{#if activeModal}}
<div class="modal">
{{> UI.dynamic template=activeModal}}
</div>
{{/if}}
</template>
Template.modal.helpers({
activeModal: function() {
return Session.get('activeModal');
}
});
Has anyone here gotten a jQuery masking library to work with Autoform? I'm trying BootStrap Form Helpers
<div class="col-md-12">
<div class="form-group">
{{> afFieldLabel name="customerInfo.agentPhone"}}
<input name="customerInfo.agentPhone" type="text" class="form-control track-order-change bfh-phone" required data-schema-key="customerInfo.agentPhone" data-format="ddd ddd-dddd">
</div>
</div>
I have customerInfo.agentPhone set to required in my schema.
When I do this code I lose the ability to validate the form against the schema. The input field can be blank and the error message that says this field can't be blank never shows up.
I figured it out. It turns out that I was using afFieldInput incorrectly - every time you use afFieldInput you have to have an #if statement to change the CSS of the wrapping div to show the validation message.
<div class="col-md-12 {{#if afFieldIsInvalid name="customerInfo.agentPhone"}}has-error{{/if}}">
<div class="form-group">
{{> afFieldLabel name="customerInfo.agentPhone"}}
{{> afFieldInput name="customerInfo.agentPhone" class="form-control track-order-change bfh-phone" data-format=" (ddd) ddd-dddd"}}
</div>
</div>
Note two things:
You have to put bfh-phone for the class.
You have to put a space in front of the parenthesis " (ddd) ddd-dddd". If you don't and just do "(ddd) ddd-dddd" the ( gets inserted into the text field on load. And obviously if you're checking to make sure that the text field is not blank, it won't fire because the ( is loaded in there already.
I've never used autoform, but looking over the documentation I'm wondering have you tried this:
{{> afFieldInput name="customerInfo.agentPhone" data-format="ddd ddd-dddd" }}
(obviously adding any additional attributes you may have set to afFieldInput before)