MeteorのBootstrapリスト項目でスワイプル・左の&スワイプ・ライト・イベントを実装したいとします。 MeteorはCordovaを使用してモバイルアプリ開発用のWebViewを提供しています。メテオのフロントエンドライブラリであるBlazeでスワイプ、タッチホールドなどのjQuery Mobileイベントを処理することが可能かどうか疑問です。 以下は、Meteor official TO-DO tutorial sampleの基本例です。MeteorでjQuery Mobileのイベントを処理することは可能ですか?
tasks.htmlファイルは次のとおりです。
<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>
そして、これはそのブレイズ/ JavaScriptの対応、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);
}
}
});
モバイルスワイプの左/右イベントをリストアイテムに実装する方法を模索しています。ユーザーがリストアイテム(タスク)をスワイプすると、前方または削除アイコンなどを表示したい。
私はスワイプを使用しました。良い仕事。しかし、より具体的であり、コードを共有することができれば(それがうまくいかない場合)、うまくいくでしょう。 – Ankit
@Ankit、私は上記のコードを提供しました。これは実際には基本的なMeteorチュートリアルのものです。 –
最近、このパッケージを使用してスワイプイベントを実装しています:https://github.com/gwendall/meteor-swing – Ankit