0

そのため、Meteor アプリに非常に単純な検索機能を実装しようとしています。これは非常に単純な医学辞書アプリなので、すべての用語とそれぞれの定義、発音などを含むコレクションが 1 つだけあります。私の目標は、ユーザーがフォーム入力を使用して検索クエリを入力し、関連する検索を表示することです。結果 (submit を押した後、keyup または keydown イベントの後は、今のところあまり重要ではありません。これは単なるプロトタイプです)。これが私がこれまでに持っているものです。

検索バー ( と呼ばれるテンプレートの一部header.html)

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" id="search" name="search" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

イベント ハンドラー ( と呼ばれるheader.js)

Template.header.events({
'submit form': function(e) {
    e.preventDefault();
    var query = $(e.target).find('[name=search]').val();

    // Log the query for testing
    console.log(query);

    //Log the object that is returned for testing
    console.log(Dictionary.find({english: query}).fetch());

    var result = Dictionary.find({english: query}).fetch();

  }
});

結果のリスト (これは、 というテンプレートで機能しない部分ですitemsList.html)

<template name="itemsList">
  <div class="items">
    {{#each dictionary}}
      <ul>
        <!-- itemPage just refers to the page individual items -->
        <li><a href="{{pathFor 'itemPage'}}">{{english}}</a></li>
      </ul>
    {{/each}}
  </div>
</template>

この場合{{english}}、検索したいコレクション内のデータを参照します ( コレクション内の英語の単語Dictionary)。

さて、これですべてが片付いたので、私の質問は次のとおりです。ここから何をすればよいでしょうか? ではheader.js、 からの結果は探してconsole.log(Dictionary.find({english: query}).fetch());いるオブジェクトです。したがって、基本的に、そのオブジェクトをitemsList.htmlテンプレートに送信して、カーソルで反復できるようにするにはどうすればよいですか?

解決策は本当に単純なものだと確信しているので、私はこれに長く取り組んできたと思います。私のアプローチがすべて間違っている場合 (物事を検索するときに多くの人がセッションを使用しているのを見てきました)、どうすればよいか教えてください。また、私は Iron-Router を使用しており、自動公開をオフにしています。そのため、これらのいずれかに変更を加える必要がある場合は、それもお知らせください。ありがとう！

4

1 に答える 1

0

検索文字列をセッションに保存し、存在する場合はセッションを引数として使用してサブスクライブするだけで、テンプレートに入力する必要があるデータを動的にサブスクライブできます

于 2014-07-10T01:18:19.527 に答える