This is my meteor template:
{{#each p}}
<div class="cpl">
<div class="chat-post">
<li class="post">
<div class="nm" id={{_id}}>
<a>{{username}}</a>
</div>
<div class="con">{{content}}</div>
<div class="cnm">
<div class="t">{{time}}</div>
<div class="m" id="cm">
<a>message </a>
</div>
</div>
</li>
</div></div>
{{/each}}
//TEMPLATE FOR PF
<template name="pf">
<form id="post-box">
<textarea id="new" required></textarea>
<button type="submit">Post</button>
</form>
</template>
//THIS IS MY HELPERS AND EVENT HANDLERS FOR PF AND PC,COLLECTION NAME ROST
Template.pc.helpers({
p: function(){
return Rost.find({}, {sort:{created:-1}});
}
});
Template.pf.events({
'submit form': function(event){
event.preventDefault();
var content= document.getElementById('new').value;
var date= new Date(),
h=(date.getHours()<10?'0':'') +date.getHours(),
m=(date.getMinutes()<10?'0':'')+date.getMinutes();
var time=h+':'+m;
var username= Meteor.user().username;
Rost.insert({
content: content,
created:date,
time:time,
username: username
});
event.target.reset();
}
});
I am using meteor and mongo as DB where {{username}}, {{content}} and {{time}} are variables of object.
How can I access {{username}} using JavaScript?
Inside your helper function, you should already have access to this data via the this context variable, or Template.instance().data. Your event handler should look like:
'click cssSelector'(event,instance) {
event.preventDefault();
}
As you can see, the second parameter is the template instance, so you have access to the data with instance.data, or you use event.currentTarget to determine the element that was click on and go from there. Please post your helpers or event handling code so that we can see what you are trying do and having problem with.
Related
I'm developing an app using Meteor Framework.
One of the features I am looking to implement is having a marquee text (like a scrolling bottom text).
I have added the package meteor-jquery-marquee and it works great with a single string. But whenever I try to modify the string, nothing happens, and it stays the same.
It's worth mentioning that I did try sessions, and it changes the text, however, the marquee animation stops, which defeats the purpose.
I have been stuck for hours trying to get it to work, some help would really save my butt here.
I've initialized the global variable in the client/main.js as
globalMessage = "Welcome to my proJECT";
And it scrolls with the marquee just fine.
Thank you in advance!
My code:
My body template
<template name="App_Body">
{{> Header}}
{{>Template.dynamic template=main}}
{{> Footer}}
<div style="color: white;" class="ui center aligned container">
<div class='marquee'>{{globalMessage}}</div>
</div>
</template>
body.js
Template.App_Body.helpers({
globalMessage () {
return globalMessage;
},
});
where I'm trying to edit the marquee:
<template name="dailyMessageControl">
<div class="container">
<br>
<br>
<div class="info pull-right"> <!-- column div -->
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h1 class="panel-title text-center panel-relative"> Modify Daily Message</h1>
</div>
<div class="list-group">
<div class="list-group-item">
<p style="font-size: 30px;">Current Message: <br>{{globalMessage}}</p>
</div>
<div class="panel-footer">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Enter new messages</label>
<input type="text" name="newMsg" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="New Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div><!-- end column div -->
</div>
</template>
the .js
Template.dailyMessageControl.helpers({
globalMessage () {
return globalMessage;
},
});
Template.dailyMessageControl.events({
'submit form': function(){
event.preventDefault();
var newMsg = event.target.newMsg.value;
globalMessage = newMsg;
}
});
Your code clearly lacks reactivity, let's fix that.
Fist, initialize globalMessage as ReactiveVar instance (client/main.js):
globalMessage = new ReactiveVar('Welcome to my proJECT');
Next, code to react to its value change (body.js):
Remove globalMessage() helper
Add code that will track globalMessage variable and re-create $.marquee:
Template.App_Body.onRendered(function appBodyOnRendered() {
this.autorun(() => {
const value = globalMessage.get();
const $marquee = this.$('.marquee');
$marquee.marquee('destroy');
$marquee.html(value);
$marquee.marquee(); // add your marquee init options here
});
});
And, lastly, update code in dailyMessageControl template to work with ReactiveVar instance:
Template.dailyMessageControl.helpers({
globalMessage () {
return globalMessage.get(); // changed line
},
});
Template.dailyMessageControl.events({
'submit form': function(){
event.preventDefault();
var newMsg = event.target.newMsg.value;
globalMessage.set(newMsg); // changed line
}
});
I am totally new to ember so please be nice :)
I have an Ember app where i want to redirect to a specific slug taken from an textfield input. In my .hbs i have the following code:
<div class="liquid-container">
<div class="liquid-child">
<div class="desktop-layout-scroll-container">
<div class="overlay-info-layout">
<div class="overlay-info-layout-content">
<h1 class="expired-overlay-status">{{t 'code.title'}}</h1>
<h2 class="expired-overlay-explanation">
{{t 'code.description'}}<br>
</h2>
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<input name="txtSlug" type="text" id="txtSlug" class="field" />
<input type="submit" name="btnGo" value="" id="btnGo" class="btn" onclick="javascript:SubmitForm()" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function SubmitForm(){
var Slugtxt = document.getElementById("txtSlug").value;
window.location = "http://www.google.com/" + Slugtxt;
}
</script>
You should never embed JavaScript in an Ember .hbs file. This code should really go in your controller for this class. First, generate your controller:
ember g controller <name_of_route>
Then inside your controller, you want to define two things. The slugtxt variable, and the redirecting as an action. That would look something like this:
import Ember from 'ember';
export default Ember.Controller.extend({
slugtxt: '',
actions: {
redirect() {
window.location = "http://www.google.com/" + this.get('slugtxt');
}
}
}
Then, back in your template, you would want to change your input to be mapped to the slugtxt variable from your controller, and set the action of the button to the redirect action that you defined in your controller. That would look something like this:
{{input value=slugtxt}}
<button {{action "redirect"}}>Submit</button>
No need to worry about using the <input> tag, you generally wont be using form data with ember.
I have problems with inserting data to collection, it says in console: Error invoking Method 'addReservation': Internal server error [500]
This is my reservation template:
<template name="reservations">
<div class="container-fluid registration-form">
<form class="new-reservation">
<div class="row">
<input type="text" name="title"/>
</div>
<button type="submit" class="btn btn-success">Add reservation</button>
</form>
<div class="row">
<div class="col-md-6">
<ul class="list-inline">
{{ #each reserve}}
{{ >reservationForm }}
{{/each}}
</ul>
</div>
</div>
</div>
<template name="reservationForm">
<li>{{title}}</li>
</template>
And this is js file:
NewReservations = new Mongo.Collection('reserve');
in isClient:
Template.reservations.helpers({
reserve: function(){
return NewReservations.find();
}
});
Template.reservations.events({
'submit .new-reservation': function(event){
var title = event.target.title.value;
Meteor.call("addReservation", title);
event.target.title.value = "";
return false;
}
})
and this is isServer
Meteor.methods({
addReservation: function(title){
NewReservations.insert({
title: title
});
}
})
I deleted insecure and autopublish.
your server console says that NewReservations is not defined, which implies that your server is not finding this variable/database. The only possible problem i see is that you've not defined your database in the both scope. I mean you might have defined your db in client side or server side only.
basically you need to put
NewReservations = new Mongo.Collection('reserve');
outside of Meteor.isClient and Meteor.isServer block.
Use bootstrap popover with MeteorJS and have trouble
I Can't assign some value that coming from collection to input value (where
{{title}} is some string like wwww). In html of form POPOVER doesnt exist value="///" ,but in my form I see this value="some title"
<template name="one">
<div class="popover-markup">
<div class=" trigger ">
Edit
</div>
</div>
<div class="content-popover hide">
<form class="form">
<input name="title" id="post_edit_title" value="{{title}}" />
</form>
</div>
</template>
Template.one.onRendered(function(){
$('.popover-markup > .trigger').popover({
html : true,
content: function() {
return $('.content-popover').html();
},
container: 'body',
placement: 'right'
});
EDIT:
Meteor.publish("posts_levels", function(){
return Posts.find();
});
<template name="www">
{{#each level}}
{{> one}}
{{/each}}
</template>
Template.www.onCreated(function(){
var self = this;
self.autorun(function() {
self.subscribe('posts_levels');
});
});
Create a Template Helper which exposes title to your template. docs
Template.one.helpers({
title: function() {
return Collection.findOne({/* select your data*/}).prop;
}
});
So, Basically i'm new to meteor(0.8.2) and trying to create a basic app having two templates(addnewPlace and Map) and a single button. What i need to get is that, when i click on "Add new Place" button, template "addNewPlace" should be loaded in body or else template "Map" should be loaded. Help will be appreciated :)
My html code:
<body>
{{> menu}}
{{> body}}
</body>
<template name="body">
{{#if isTrue}}
{{> addnewPlace}}// tested this template individually, it works.
{{else}}
{{> maps}} // tested this template individually, it works too.
{{/if}}
</template>
<template name="menu">
<h1>Bank Innovation Map</h1>
<input type="button" value="Add new Place">
</template>
My js code:
Template.body.isTrue = true;
Template.menu.events({
'click input': function(){
//load a new template
console.log("You pressed the addNewplace button");//this fn is called properly
Template.body.isTrue = true;
}
});
Well first of all you obviously aren't changing anything in the click event (true before, true after). But also if you did, I think you might be better off using a session variable for this, to maintain reactivity.
Session.setDefault('showAddNewPlace', false)
Template.body.isTrue = function() { Session.get('showAddNewPlace'); }
Template.menu.events({
'click input': function(){
//load a new template
console.log("You pressed the addNewplace button");//this fn is called properly
Session.set('showAddNewPlace', true)
}
});
Meteor 0.8.2 comes in with the dynamic template include feature. Just set a session variable value on click event and you would like to use the template name on the event.
Session.setDefault('myTemplate', 'DefaultTemplateName');
"click input": function (event) {
Session.set("myTemplate", 'template_name');
}
You can now write this:
<body>
{{> menu}}
{{> body}}
</body>
<template name="body">
{{> UI.dynamic template=myTemplate}}
</template>
<template name="menu">
<h1>Bank Innovation Map</h1>
<input type="button" value="Add new Place">
</template>
You may like to take a look at this article for the reference:
https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/