I have a simple meteor template that creates a dropdown:
<template name="Select">
<div class="input-fields">
<select>
{{#each options}}
<option value="{{_id}}" selected={{optionSelected}}>{{name}}</option>
{{/each}}
</select>
</div>
</template>
I normally use it by adding it as a blaze spacebar:
{{> Select
options=options
}}
Now I'm trying to pass this dropdown as the HTML argument inside a Sweet Alert 2 dialog, but blaze doesn't render the component, since swal is probably triggered after the blaze rendering is already finished. Is there another way to reuse the template inside the swal call?
swal.fire({
title: "MyDropdown",
HTML: "{{> Select
options="+options+"}}",
})
I know you can natively add a dropdown in Sweet Alert 2, but I'm specifically interested in how to add my own templates to it.
Did you try
Blaze.toHTML('Select')
or
Blaze.toHTMLWithData('Select',{options})
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');
}
});
I have a multiple select with a Handlebar template in Meteor.js. On first rendering, everything is fine ("Politics" and "People" are preselected as expected):
As soon as the template has to be rerendered (because a Session variable changes, e.g. Session.set("foo", "Hello World!")), the third option is not preselected anymore:
My setup:
<template name="select">
<select name="foo" multiple>
<option value="1">Tech</option>
<option value="2" selected>Politics</option>
<option value="3" selected>People</option>
</select>
</template>
<template name="test">
{{foo}}
{{> select}}
</template>
{{> test}}
Template.test.helpers(
foo: ->
Session.get("foo")
)
Do you have any idea why the options are preselected anymore after rerendering?
Solution is:
<template name="test">
{{#isolate}}
{{foo}}
{{/isolate}}
{{> select}}
</template>
Typically, the exact extent of re-rendering is not crucial, but if you
want more control, such as for performance reasons, you can use the
{{#isolate}}...{{/isolate}} helper. Data dependencies established
inside an #isolate block are localized to the block and will not in
themselves cause the parent template to be re-rendered. This block
helper essentially conveys the reactivity benefits you would get by
pulling the content out into a new sub-template.
If you put {{foo}} inside {{#isolate}} ... {{/isolate}} then parent template won't be rerendered, so also {{> select}} won't be affected.
So I am not sure why you are loosing the multiple select but I can recommend you put an {{#isolate}} tag around your{{> select}} template. That should keep the template from re-rendered. Though it will not help if your select template re-renders because its data changes. Hope that helps...