I have a meteor dynamic template
{{#animate type="bounceInDown" delay="200"}}
{{> Template.dynamic template=fetchTemplate }}
{{/animate}}
and this is the helper
'fetchTemplate': function(){
var myui = "Tab";
return myui;
}
I know i can use template level subscriptions http://docs.meteor.com/#/full/Blaze-TemplateInstance-subscribe but i want to internationally delay loading my dynamic template and in the period of delay,i want to display loading.
I am doing this to be able to center my loading icons and i want to see the position of the icon(its development work really,not something for production).
What options are available for doing this kind of thing?.
This is the solution that i found to be working
The js
/*****************************************************************************/
/* AccountSettings: Event Handlers */
/*****************************************************************************/
Template.AccountSettings.events({
});
/*****************************************************************************/
/* AccountSettings: Helpers */
/*****************************************************************************/
Template.AccountSettings.helpers({
'fetchTemplate': function(){
var myui = "Tab";
return myui;
},
'tl': function () {
var g = Session.get('shouldRender');
return g;
}
});
/*****************************************************************************/
/* AccountSettings: Lifecycle Hooks */
/*****************************************************************************/
Template.AccountSettings.onCreated(function () {
});
Template.AccountSettings.onRendered(function () {
Session.set('shouldRender',false);
setTimeout(function () {
Session.set('shouldRender',true);
}, 5000);
var g = Session.get('shouldRender');
});
Template.AccountSettings.onDestroyed(function () {
});
and the html
{{#if tl}}
{{#animate type="bounce"}}
{{> Template.dynamic template=fetchTemplate }}
{{/animate}}
{{else}}
<div class="sk-spinner sk-spinner-cube-grid">
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
</div>
{{/if}}
Related
I am having collection issues in my Meteor project. I added the following code to my Resolutions.js file:
Resolutions = new Mongo.Collection('resolutions');
if (Meteor.isClient) {
Template.body.helpers({
resolutions: function() {
Resolutions.find({});
}
});
Template.body.events({
'submit .new-resolution': function(event) {
var title = event.target.title.value;
Resolutions.insert({
title: title,
createdAt: new Date()
});
event.target.title.value = "";
return false;
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
and added the following to my Resolutions.html file:
<head>
<title>Resolutions</title>
</head>
<body>
<div class="container">
<header>
<h1>Monthly Resolutions</h1>
<form class="new-resolution">
<input type="text" name="title" placeholder="A new resolution" />
<input type="submit" value="Submit"/>
</form>
</header>
<ul>
{{#each resolutions}}
{{> resolution}}
{{/each}}
</ul>
</div>
</body>
<template name="resolution">
<li>{{title}}</li>
</template>
After running the app I get zero errors but still the site does not return any of the collection value. I have no clue what is wrong with this project.
Template.body.helpers({
resolutions: function() {
return Resolutions.find({});
}
});
You forgot to use the return keyword.Remember that when creating a helper, you always need to return a value.
I am new to meteor and got stucked and can't understand what am I doing wrong. Enlighten me please.
Here is the HTML file:
<body>
<h1>Do</h1>
{{#if activeTask}}
{{> currentTask}}
{{else}}
{{> newTask }}
{{/if}}
<div>
</div>
</body>
<template name="newTask">
<form>
<label>What<input type="text" name="what" placeholder="gimme an action"/></label>
<input type="submit" value="Go"/>
</form>
<!--
{{> inputAutocomplete settings=settings id="msg" class="input-xlarge" placeholder="action"}}
-->
</template>
<template name="currentTask">
<form>
<label>What<input type="text" name="what" placeholder="gimme an action"/>{{activeTask.what}}</label>
<div>4h 15m</div>
<input type="submit" value="Stop"/>
</form>
</template>
And here is the JavaScript file:
tasks = new Mongo.Collection('tasks');
if (Meteor.isClient) {
Template.body.helpers({
activeTask: function() {
var task = tasks.findOne(
{
endAt: null
},
{
sort: {
startAt: -1
}
}
);
console.log(task);
return task;
}
});
Template.newTask.events({
'submit' : function(event) {
event.preventDefault();
var now = Date.now();
var what = event.target.what.value;
tasks.insert({ what: what, startAt: now, endAt: null });
}
});
}
It successfully adds a new document into the database and logs this in the helper activeTask. One step later it logs no task at all. It has gone. But why?
If you don't have the package autopublish (https://atmospherejs.com/meteor/autopublish) installed, you need to create a publication (client-side) and subscription (server-side):
if (Meteor.isServer) {
Meteor.publish('tasks', function () {
return tasks.find();
});
}
if (Meteor.isClient) {
Meteor.subscribe('tasks');
}
I've also explained working with collections in a recent blog article.
I have a very simple function that checks wether user is logged in and else send him to the signup page.
var requireLogin = function() {
if (! Meteor.user()) {
this.render('signUpForm', {
path: '/signup',
layoutTemplate: 'signup'
});
}
// else if () {
// this.render('listProfiles');
// }
else {
this.next();
}
};
this is the layoutTemplate (as simple as can be I believe) :
<template name="signup">
<div class="signup-page">
<div class="container">
{{> yield}}
</div>
</div>
</template>
I can't use the layoutTemplate with .render?
I am going to assume you are using Iron Router.
As far as I know, you can't pass the layout template into the render function.
The easiest way get around this would be to use Router config:
// router.js
Router.configure({
layoutTemplate: 'signup'
});
Then in your js:
if (! Meteor.user()) {
this.render('signUpForm');
}
I'm playing around with Meteor and react-meteor. However, I can't seem to grok how the template event-handling works when using react (if it even does).
index.html:
<head>
<title>reactjs</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> FormTest}}
</body>
lib/components/testform.jsx:
var FormTest = ReactMeteor.createClass({
templateName: "FormTest",
render: function() {
return (
<div>
<button className="my-button">My byutton</button>
</div>
);
}
});
index.js:
if (Meteor.isClient) {
Template.FormTest.events({
"click .my-button": function (event, template) {
alert("My button was clicked!");
}
});
}
I get nothing.
Is there something wrong with my code or my approach? If approach, what would be the proper way to handle events?
If you add an event handler here:
<button className="my-button" onClick={this.handleClick}>My button</button>
You can then do this in your testform.jsx file:
handleClick: function(e) {
if (Meteor.isClient) {
e.preventDefault();
console.log("My button was clicked");
}
}
I'm also testing React with Meteor, but this seems to work.
I successfully implemented a form with quill wysiwyg but now I want to create a component to reuse it. This is my working implementation:
<template name="form">
<form>
<div id="toolbar"> ... html with toolbar buttons </div>
<div id="editor"></div>
<input type="submit" value="save"/>
</form>
</template>
Template.form.rendered = function () {
this.quill = new Quill('#editor', {
modules: {
'toolbar': { container: '#toolbar' },
'link-tooltip': true
},
theme: 'snow' }
);
}
Template.form.events({
'submit form': function(e, tmpl) {
e.preventDefault();
var html = tmpl.quill.getHTML();
// code to save the form data
}
This is what I want to make it reusable. My questions are inside the code:
<template name="form">
<form>
{{> editor }}
<input type="submit" value="save"/>
</form>
</template>
<template name="editor">
<div id="toolbar"> ... html with toolbar buttons </div>
<div id="editor"></div>
</template>
Template.editor.rendered = function () {
this.quill = new Quill('#editor', {
modules: {
'toolbar': { container: '#toolbar' },
'link-tooltip': true
},
theme: 'snow' }
);
// How can I pass quill to the parent template?
}
Template.form.events({
'submit form': function(e, tmpl) {
e.preventDefault();
// How can I access quill variable on the nested template, so I can
// call quill.getHTML()?
}
Here's a pattern I use to solve this sort of problem. Define a class called Editor and a template editor. The intention is that the data context inside editor will be an instance of Editor.
function Editor() {
this.quill = null;
}
Template.editor.rendered = function () {
this.data.quill = new Quill(...);
}
<template name="editor">...</template>
Inside form's created callback, create an Editor and store it on the template instance. Then when you call out to the editor template, pass in the Editor instance as the data context.
Template.form.created = function () {
this.editor = new Editor();
}
Template.form.helpers({
editorInstance: function () {
return Template.instance().editor;
}
});
<template name="form">
<form>
{{> editor editorInstance }}
<input type="submit" value="save"/>
</form>
</template>
You can then define methods on the Editor prototype which can be called by the form:
Editor.prototype.getTextAsHTML = function () {
return this.quill && this.quill.getHTML();
}
Template.form.events({
"submit form": function(e, tmpl) {
e.preventDefault();
var html = tmpl.editor.getTextAsHTML();
// ...
}
}
This is a nice way to abstract the details of the editor so that the form doesn't need to know about it. You can reuse the editor and if you ever want to change it, you just have to make sure getTextAsHTML works the same.