CODEWITHSUNDEEP
javascriptmeteor
ceth
ceth

Reputation: 45325

Refresh collection on the browser

I have a templates:

  <div id="search">
    {{> search}}
  </div>

  <div id="bookmarks-container">
    {{> bookmarks}}
  </div>

<template name="bookmarks">
    {{#each bookmarks}}
        <div class="bookmark">
            {{URL}}
        </div>
    {{/each}}
</template>

<template name="search">
    <input type="text" id="search" value="" />  
</template>

And I have a code to get bookmarks:

bookmarks = new Meteor.Collection("Bookmarks");

if (Meteor.isClient) {

  Template.bookmarks.bookmarks = function() {    
    var s = $('#search').text();
    alert(s);
    if (s === '')
      return bookmarks.find({});
    else
      return bookmarks.find({tags : 'some_tag'});
  };

I want to display all bookmarks if #search text field is empty and filter my bookmarks if it is not.

As I see Template.bookmarks.bookmarks calls only once - when page loaded in the browser. How can I call this method every time when user press the button in the #search text input:

Template.search.events({
   'keyup #search' : function(e,t) {
     // ....
   }

Thanks in advance.

Upvotes: 0

Views: 78

Answers (1)

Tarang
Tarang

Reputation: 75955

Relay the data with Session

var s = Session.get("query");

and 

Template.search.events({
  'keyup #search' : function(e,t) {
    Session.set("query",t.find('#search').value);
  }

On its own the template bookmarks helper wouldn't know when to refresh the data. Using Session tells it that the query variable/hash is reactive.

Upvotes: 2

Related Questions