How do I add mobile swipe left/right events in Meteor?
I've tried...
Template.NAME.events({
'swipeleft': function(){ //DO SOMETHING }
})
I've also tried using chriswessels/meteor-hammer package,
Template.NAME.gestures({
'swipeleft .img-contain': function(){
alert("test")
},
'tap': function(){
alert("test")
},
})
Neither of those methods worked.
Did you try the hammer:hammer package?
Seems like work pretty good.
You can configurate like this.
Template.NAME.rendered = function(){
$('body').hammer({
drag_min_distance:1,
swipe_velocity:0.1
});
};
And this Events
Template.NAME.events({
'swipeleft #hammerDiv': function(e, t) {
e.preventDefault();
//Do cool stuff here
},
'swiperight #hammerDiv': function(e, t) {
e.preventDefault();
//Do cool stuff here
}
});
Related
I have been scratching my head while trying to adapt a collection fs for my iron cli generated project.
Iron cli uses iron router. This is the tutorial i am following https://medium.com/#victorleungtw/how-to-upload-files-with-meteor-js-7b8e811510fa#.mdionmurk
The first snippet
var imageStore = new FS.Store.GridFS(“images”);
Images = new FS.Collection(“images”, {
stores: [imageStore]
});
and the second is the deny/allow rules
Images.deny({
insert: function(){
return false;
},
update: function(){
return false;
},
remove: function(){
return false;
},
download: function(){
return false;
}
});
Images.allow({
insert: function(){
return true;
},
update: function(){
return true;
},
remove: function(){
return true;
},
download: function(){
return true;
}
});
Where should the first snippet go specifically and where should the second snippet go?.Incase anyone is wondering the structure of an iron-cli this is how it looks like https://github.com/iron-meteor/iron-cli
Based on the generated structure, your first snippet will go into app/lib/collections and your second will go into app/server/collections.
I am using the following path to logout in iron-router
Router.route('/logout',{
name: 'logout',
onBeforeAction: function(){
Meteor.logout(function(err){
console.log('logging out' + Meteor.userId());
Router.go('/');
});
}
});
which is used in many places in my app when it is triggered by:
Template._loginButtonsLoggedInDropdown.events({
'click #login-buttons-logout': function (event) {
event.preventDefault();
Router.go('/logout');
}
});
It works fine everywhere but it fails to logout from one template;actually is logs out but after 20secs or so; this specific template has 3 reactive template's vars and 2 subscriptions defined in .onCreated function.
I am looking for any hints why it is so slow and if i should close the template or subscriptions in other way? or any other reason why it logs out so slowly..
version without routers works the same (meaning logout still takes 20sec)
'click #login-buttons-logout': function (event) {
event.preventDefault();
Meteor.logout(function(err){
console.log('logging out' + Meteor.userId());
Router.go('/');
});
}
There is no reason to use a route for the logout. Just change your event handler as follows:
Template._loginButtonsLoggedInDropdown.events({
'click #login-buttons-logout': function (event) {
event.preventDefault();
Meteor.logout(function() {
Router.go('/');
}
}
});
And get rid of the route 'logout'.
the problem was my subscription although I do not fully understand why.
My code was:
Template.observedQuestions.onCreated(function(){
var self = this;
self.autorun(function(comp){
self.subscribe('observedQuestionsFeed');
});
});
which i then changed to:
Template.observedQuestions.onCreated(function(){
computation = Tracker.autorun(function(thisComp){
status = Session.get('loggingOut');
console.log('tracker started ' + status);
mySubscription = self.subscribe('observedQuestionsFeed');
if (status){
thisComp.stop();
}
});
});
where I do stop the computation manually and it works.
thank you all for your help.
Why isn't this reactive? And more importantly how can it be made reactive?
I'd like the data to be saved in Mongo and used in the template. I could use a ReactiveVar or ReactiveDict. Do I need two copies of the data?
Doesn't Suspects.findOne('bruce') return a reactive object already? I tried putting the human answer directly on Bruce, but it didn't trigger an update.
The events fire, log(this) shows bruce's answer was changed, but the template doesn't re-render. What's the good way to do this?
http://meteorpad.com/pad/KoH5Qu7Fg3osMQ79e/Classification
It's Meteor 1.2 with iron:router added:
<head>
<title>test</title>
</head>
<template name="question">
{{#unless isAnswered 'human'}} <!-- :-< I'm not reacting here -->
<div>Sir, are you classified as human?</div>
<button id="no">No, I am a meat popsicle</button>
<button id="smokeYou">Smoke you</button>
{{else}}
<div> Classified as human? <b>{{answers.human}}</b></div>
{{/unless}}
</template>
And the JavaScript:
// Why isn't this reactive?
if (Meteor.isClient) {
Template.question.helpers({
isAnswered: function (question) { // :-< I'm not reactive
var suspect = Template.instance().data;
return (typeof suspect.answers[question] !== 'undefined');
}
});
Template.question.events({
'click #no': function () {
this.answers.human = "No"; // :-< I'm not reactive
console.log(this);
},
'click #smokeYou': function() {
this.answers.human = "Ouch"; // :-< I'm not reactive
console.log(this);
}
});
}
// Collection
Suspects = new Meteor.Collection('suspects');
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
Suspects.upsert('bruce', { quest: 'for some elements', answers: {}});
});
Meteor.publish('suspects', function() {
return Suspects.find({});
});
}
// Iron Router
Router.route('/', {
template: 'question',
waitOn: function() {
return Meteor.subscribe('suspects');
},
data: function() {
return Suspects.findOne('bruce');
}
});
Thanks :-)
The events are not actually updating the reactive data source (the db record). Instead of doing:
Template.question.events({
'click #no': function () {
this.answers.human = "No";
}
});
The event needs to perform a database action, either through a direct update or through a Meteor.call() to a Meteor.method. For example:
'click #no': function(){
Suspects.update('bruce', {'answers': {'human': 'no'}});
}
If you use this pattern, you will also need to set the correct allow and deny rules to permit the update from client code. http://docs.meteor.com/#/full/allow. Methods generally end up being a better pattern for bigger projects.
Also, I'm not sure off the top of my head that Template.instance().data in your helper is going to be reactive. I would use Template.currentData() instead just to be sure. http://docs.meteor.com/#/full/template_currentdata
Very close you just need to use ReactiveVar by the sound of it it pretty much explains what it's :) http://docs.meteor.com/#/full/reactivevar
and here's how to use it
if (Meteor.isClient) {
Template.question.onCreated(function () {
this.human = new ReactiveVar();
});
Template.question.helpers({
isAnswered: function (question) {
return Template.instance().human.get();
}
});
Template.question.events({
'click #no': function (e, t) {
t.human.set('No');
console.log(t.human.get());
},
'click #smokeYou': function(e, t) {
t.human.set('Ouch');
console.log(t.human.get());
}
});
}
UPDATE: if you're using a cursor I usually like to keep it on the template level not on iron router:
if (Meteor.isClient) {
Template.question.helpers({
isAnswered: function (question) {
return Suspects.findOne('bruce');
}
});
Template.question.events({
'click #no': function (e, t) {
Suspects.update({_id: ''}, {$set: {human: 'No'}});
},
'click #smokeYou': function(e, t) {
Suspects.update({_id: ''}, {$set: {human: 'Ouch'}});
}
});
}
I would like to push the data into the array after a 2 second delay each time.
//working code
$scope.GetData = function(){
DataFactory.GetCategories()
.success(function(data,status){
$scope.TheArray.push(data);
})
}
//This doesnt work. No data is shown in html
$scope.GetData = function(){
DataFactory.GetCategories()
.success(function(data,status){
setTimeout(function() {
$scope.TheArray.push(data);
}, 2000);
})
}
EDIT:
$scope.GetData = function(){
DataFactory.GetCategories()
.success(function(data,status){
$timeout(function () {
$scope.ChatHistory.push(JSON.parse(JSON.parse(data)));
}, 3000);
})
}
Use $timeout instead of setTimeout, and it will run fine. When using setTimeout, you will have to do $scope.$apply to propogate your changes to your view/model, but $timeout does that magic for you, so you don't have to worry about it.
More info on $timeout here
EDIT:
You will have to add $timeout as a dependency, like below
angular.module('myApp').controller('MyController', function($timeout) {
$scope.GetData = function(){
DataFactory.GetCategories()
.success(function(data,status){
$timeout(function () {
$scope.ChatHistory.push(JSON.parse(JSON.parse(data)));
}, 3000);
})
}
})
I tried to use an event that is triggered when the current window is maximized, however I can't seem to get the event triggerd.
I tried the following:
var appWindow = Ti.UI.currentWindow();
appWindow.addEventListener('maximized', function(){
alert('maximized...');
});
and:
Ti.UI.UserWindow.maximized(function() {
alert('test2');
});
and:
Ti.UI.currentWindow.maximized( function() {
alert('test');
});
Does anyone know how to use this event: http://tidesdk.multipart.net/docs/user-dev/generated/#!/api/Ti.UI.UserWindow-event-maximized ?
The following should work:
var appWindow = Ti.UI.getCurrentWindow();
appWindow.addEventListener(Ti.MAXIMIZED, function(){
alert('maximized');
});