アプリケーションの新しいアイデアが浮かぶたびに、私は Meteor から始めます。そして、私が何か他のものを使うことになるたびに。そして、単純なデータベースクエリの実行方法を知らないことが原因だと思います。
これは架空の例です。ユーザーがボックスに何かを入力し、ボタンを押すと、入力した内容の画像が表示されるアプリを作成したいと考えています。いくつかの画像検索 API を使用します。
<template name="image">
<input type="text" class="description"></input>
<button class="showImage"></button>
<img src="{{img}}"></img>
</template>
これまでのところ、十分に単純に思えます。私の理解では、最初にデータベースに情報を入れずにクライアントに情報を送信する方法はありません。クエリを受け取り、画像情報をデータベースに入力する関数 addToDB があるとします。
Template.image.events({
'click .showImage': function() {
addToDB($('.description').val());
}
});
すごい!それはまだそれほど悪くはありません。しかし、データをクライアントに送り返すには...
//server.js
Meteor.publish("image", function(query) {
Images.find({q: query});
}
ちょっと待って。クエリがまだわからないため、クライアントがロードされたときにサブスクライブすることはできません。したがって、おそらくイベントハンドラーは
Template.image.events({
'click .showImage': function() {
addToDB($('.description').val());
Deps.autorun(function() {
Meteor.subscribe("images", $('.description').val());
});
}
});
よし、それをテンプレートに入れよう...
Template.image.img = function() {
return Images.findOne().imgsrc;
}
いいえ、テンプレートが最初に読み込まれたとき、まだ Images を購読していないため、エラーが発生します。したがって、次のようにテンプレートを更新できます。
<template name="image">
<input type="text" class="description"></input>
<button class="showImage"></button>
{{#each info}}
<img src="{{info.img}}"></img>
{{/each}}
</template>
次に、テンプレートの入力関数を次のように変更します。
Template.image.info = function() {
return Images.find({}, {limit: 1});
}
そして出来上がり!
私は今晩、そのすべてにつまずいたことを認めようと思っているよりも長く過ごしました。それが単純な古いノードである場合、単純な jQuery を使用できたはずです。
しかし、Meteor には、私が本当に活用したい驚くべき機能が 100 万もあります。だから私が望んでいるのは、誰かが私に道を示すことができるということです. このプロセスと最終結果で、どのような間違いを犯しましたか? meteor アプリ内でこれを行うための最も素晴らしく、最もクリーンで、最も簡単な方法は何ですか。
これは非常に複雑で、他の多くのことを非常にシンプルにするフレームワーク内にあります。では、単純なデータベース クエリを作成するにはどうすればよいでしょうか。