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');
}
});
Related
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();
});`
I simply created a meteor project and copy/paste from the example 'basic' files (found at https://github.com/EventedMind/iron-router/tree/devel/examples/basic) replacing Meteor project .html and .js files.
On the HTML, the example failed to include any template inclusion so I added {{> Home}} and run Meteor between the 'body' block.
<body>
{{> Home}}
</body>
The complete HTML code is:
basic
<body>
{{> Home}}
</body>
<template name="Home">
<h1>Home</h1>
{{> Nav}}
<p>
Data Title: {{title}}
</p>
</template>
<template name="One">
<h1>Page One</h1>
{{> Nav}}
</template>
<template name="Two">
{{> Nav}}
<h1>Page Two</h1>
</template>
<template name="Nav">
<ul>
<li>
Home
</li>
<li>
Page One
</li>
<li>
Page Two
</li>
</ul>
</template>
The .js code is exactly as in the example.
When run, however, it failed to change or route to pages One and Two. It simply stays on Home.
I am learning to work with it but I don't seem to get it right even on the simplest of examples. What I am doing wrong?
Router.map is now deprecated and replaced by Router.route, however, there seem to be a few bugs they're still ironing out. First of all, I've found that their basic routing function rarely works at the moment, so don't use it for now, i.e.:
Router.route('/path', function() {
this.render('pathName');
});
Whether this is due to compatibility issues or something else, I have no idea. I have found a very standard formula that seems to work quite nicely however, and that is to replace the function with the built in "Route Specific Options", and specify exactly what you want, like so using basic JSON:
Router.route('/path', {
name: 'pathName',
path: '/path',
template: 'templateName',
data: function () {
title: 'My Title'
}
});
Notice the path: option. This should not be necessary, as the path is defined as the first parameter of your Router function, but they specifically state in the documentation that you may need to include a path: in your routes for backwards compatibility. I'm sure once they get everything operating smoothly you'll be able to delete this entirely.
Also, the template: option should not be necessary if the templateName is the same as your /path (and for that matter, the pathName: option should not be necessary if it is also the same as your /path), but I've found including them just makes life easier as sometimes they will not function properly otherwise.
In short, when the bugs are gone, simple templates like yours will be called with one line:
Router.route('/one');
The end result is that they have simplified how routes are called and defined, but unfortunately, it just doesn't seem to working as planned at the moment. I hope this helps you with understanding the difference between Router.map and Router.route now.
Plus, the main problem with your code before was that you inserted the partial {{> Home}} between your body tag, which isn't necessary and messes things up, as that partial will always remain even as meteor attempts to route between and load other templates. In essence, when Meteor went to load template "One" it had to do so on top of template "Home", meaning you had, among other things, two {{> Nav}} partials loading at once.
When using iron router package you must leave body tag as it is or don't include it at all, i'm using a layout template but its not necessary:
basic.html:
<head>
<title>basic</title>
</head>
<body>
</body>
<template name="layout">
{{> yield}}
</template>
<template name="Home">
{{> Nav}}
<h1>Home</h1>
<p>
Data Title: {{title}}
</p>
</template>
<template name="One">
{{> Nav}}
<h1>Page One</h1>
</template>
<template name="Two">
{{> Nav}}
<h1>Page Two</h1>
</template>
<template name="Nav">
<ul>
<li>
Home
</li>
<li>
Page One
</li>
<li>
Page Two
</li>
</ul>
</template>
basic.js:
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function(){
this.route('Home', {path: '/', data: {title: 'My title'}});
this.route('One');
this.route('Two');
});
and now works properly.
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>
I want to render each article in my meteor Articles collection.
(File located in myProject/collections/collections.js so it should be available for both client and server)
Code in collections.js:
Articles = new Meteor.Collection('articles');
I've got the autopublish package installed and and i have inserted an object in the Article collection via the Chrome console and verified the insert via the console with: Articles.findOne()
Articles.insert({name: 'HTML5', description: 'HTML5 for beginners', src: 'https://www.youtube.com/watch?v=9gTw2EDkaDQ'})
What i have got so far is:
<head>
<title>Articles</title>
</head>
<body>
{{> main}}
</body>
My main template is the one that won't show the articles.
<template name="main">
<div class="container-fluid">
{{#each articles}}
{{> article}}
{{/each}}
</div>
</template>
And my article template which should be rendered for each of the objects in my Articles collection, looks like this:
<template name="article">
<div class="item well span4">
<iframe height="{{height}}" src="{{src}}"></iframe>
<hr>
<h4 class="muted">{{name}}</h4>
<p>{{description}}</p>
</div>
</template>
What do i need to add to render this article? And what would i have to do to render the article if i were remove the autopublish package?
What do i need to add to render this article?
You need to tell what your main template how to calculate the field articles. You simply do that by calling the helpers method on the template.
And what would i have to do to render the article if i were remove the
autopublish package?
You would need to create a publish, so the clients can get the documents in the collection by subscribing to it.