Is it possible to handle jQuery Mobile events in Meteor?

Question

I want to implement a swipe-left & swipe-right event on Bootstrap list item in Meteor. Meteor uses Cordova for providing WebView for mobile app development. I wonder if it is possible to handle jQuery Mobile events like swipe, touch-hold etc. in Blaze which is Meteor's front-end library? The following is a basic example from Meteor official TO-DO tutorial sample.

The tasks.html file is:

<template name="task">
    <li class="{{#if checked}} checked {{/if}}"> <!-- set the CSS for a checked task -->
        <input type="checkbox" checked="{{checked}}">
        {{#if isOwner}}
            <button class="toggle-private">
                {{#if private}}
                    Private
                {{else}}
                    Public
                {{/if}}
            </button>
        {{/if}}

        <span class="text">{{text}}</span>
        <span class="createdBy">
            {{#if createdBy}}
                by  {{createdBy}}
            {{else}}
                by  anonymous user
            {{/if}}
        </span>
        <a class="js-delete-task" id="deletetask" href="#" >
            <i class="fa fa-trash-o pull-right" aria-hidden="true"></i>
        </a>
    </li>
</template>

And this is its Blaze/JavaScript counterpart, tasks.js;

Template.task.helpers({
    isOwner: function () {
        console.log(`this.createdBy is ${this.createdBy}`);
        return (this.createdBy === Meteor.user().username);
    },
    private: function () {
        return this.private;
    }
});

Template.task.events({
    'click .js-check-task': function(event, template){
        if(this._id) {
            console.log("Check the task, converting to: ", !this.checked);
            Meteor.call('tasks.check', this._id, this.checked);
        }
    },
    'click .js-delete-task': function(event, template){
        console.log("Deleting the task: ", this._id);
        if(this._id) {
            console.log(`Calling deleteTask()`);
            Meteor.call('tasks.delete', this._id);
        }
    },

    'click .toggle-private': function(event, template) {
        console.log(`Toggling private`);
        if(this._id) {
            console.log(`Calling task.togglePrivate`);
            if (this.private === null || this.private === undefined)
                Meteor.call('tasks.setPrivate', this._id, false);
            else
                Meteor.call('tasks.setPrivate', this._id, this.private);
        }
    }
});

I am seeking a way to implement the mobile swipe left/right event on the list items. If user swipes left a list item (a task) I want to display the forward or delete icons, etc.

I have used swipe. Works good. However, if you can be more specific and share some code(if not working) it will nice. — Ankit
@Ankit, I provided the code above, which is actually from the basic Meteor tutorial. — Gokhan Karadag
I recently implements a swipe event using this package : github.com/gwendall/meteor-swing — Ankit

Gokhan Karadag Gokhan Karadag · Accepted Answer · 2017-06-07T15:06:28

I've found a nice package providing support for mobile touch events in Meteor, Blaze. Here it is; https://atmospherejs.com/chriswessels/hammer.

Is it possible to handle jQuery Mobile events in Meteor?

1 Answers