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();
});`
Related
Say I have a widget that is going to display a graph and another widget that will display a table in a typical dashboard. Because of the consistency of the widget's outter controls, I want to put the bootstrap panel in a template that displays consistently for all widgets, similar to the template below:
<template name="widgetBox">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
{{this.title}}
<span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-chevron-down"></i></span>
</div>
<div class="panel-body">
<!-- I want the widget to go here -->
</div>
</div>
</div>
</template>
I'm not sure how to do this by iterating over a collection, because I would like to control the appearance of each of the widget bodies with their own template. For instance two table view widgets might share a template that includes sorting or filtering, while two graph widgets would have completely different requirements and layout.
Is it possible to use boilerplate html like the "widgetBox" template above while placing another template inside the panel-body?
When you want one outer template to reuse multiple inner templates you can either use a router and a {{> yield}} pattern or use dynamic templates
The former is typically used for master page layouts although you can have multiple yield's inside a layout.
The latter may be better suited for widgets.
{{> Template.dynamic template=myTemplateName [data=data] }}
where myTemplateName is the name of a helper function that returns a string corresponding to the name of a template you've created.
I created this website : pictionary6470.meteor.com using meteor.
The image logo only shows up on home page but not on game page (after you log in and start to continue a game).
There are two pages which I created using routers. I have the image included in my template, and included the template using the same code on both pages.
in html:
<body>
{{> nav}}
</body>
I put the nav template in the home.html, and refer to it in the game.html.
<div class="container">
<img src="icon.png" height="50" width="350"/>
<ul id="nav-mobile" class="right side-nav">
<li>{{>loginButtons}}</li>
{{#if currentUser}}
{{/if}}
</ul>
</div>
Another problem im having is that when it router to different pages, it flash once then get to the destination page. Does any one know why?
First add iron router package.
meteor add iron:router
Second lets use the {{> yield}}, helper on the new layout template
<template name="layout">
<img src="icon.png" height="50" width="350"/>
<div>
{{> yield}}
</div>
</template>
now on a new file inside lib/routes.js add the new code.
Router.configure({
loadingTemplate: 'load',
layoutTemplate: 'layout'
});
For that flash thing lets add a loadingTemplate
first add meteor add sacha:spin
and create a new template like this
<template name="load">
{{> spinner}}
</template>
You need to understand that we all calling all the to the layout template, and we place it inside the {{> yield}} helper. so any content outside the yield helper will be available on all webpage.
For more about {{>yield}} and how it works take a look here
Have you tried this?
<img src="/icon.png" height="50" width="350"/>
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'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.