CODEWITHSUNDEEP
meteor
Marty Wallace
Marty Wallace

Reputation: 35734

Meteor - idiomatic way of re rendering template

I have a simple template which has a search box in it:

<template name="search">
  <input type="text" name="search" id="search" />
    {{> search_results}}
</template>

and obviously, the search results template:

<template name="search_results">
    <ul>
        {{#each results}}
        <li>{{this.resultValue}}</li>
        {{/each}}
    </ul>
</template>

There is an event for keyp on the search input:

 Template.search.events({
        'keyup input#search': function (e) {
           // fetch result from db
        }
    });

My problem is, where i have the comment: fetch result from db how do i get the search results template to auto update with the results from the db query?

To be clear: i can get the results fine, just cant see how to get the results template to update.

Upvotes: 0

Views: 61

Answers (1)

richsilv
richsilv

Reputation: 8013

Essentially, something in the template you want to rerender (search_results) has to be reactive and register a changed event. Out of the box, that means it could be any of the data sources listed here. Since this isn't happening for you, I assume that when you "fetch results from db" you're not actually returning the result of a minimongo query, as this would be reactive by default.

If so, this kind of problem is often most easily solved by rolling your own reactivity using the Deps.Dependency prototype, which (as I understand it) underpins all the other reactive data sources other than the minimongo itself.

If you set var resultsChanged = new Deps.Dependency(), you get an object with two methods: depends and changed. Invoke the former in any computation you want to rerun when it changes and the latter to register a change. Session variables are basically just key/value stores with these Deps.Dependency methods attached to their get and set methods respectively.

So if you have resultsChanged initialised, you just need to make sure your search_results template depends on it, either by adding a new helper function (if results is in the data context as opposed to being a call to a helper), or amending the results helper itself. I'll assume the latter, but adding a new helper instead would be equally trivial.

Template.search_results.helpers({
    results: function() {
        resultsChanged.depend();
        // get your results from wherever
        return results;
    }
});

That will rerun every time resultsChanged changes, so you just have to add the appropriate code in your callback when you fetch the results:

  'keyup input#search': function (e) {
       // fetch result from db, passing "resultsChanged.changed()" in a callback
    }

Obviously, if the result fetching is synchronous, you don't even need to pass a callback, you can just do it on the next line.

I hope that is vaguely helpful - please let me know if it's not. If my assumption that you're not just pulling something out of the database is wrong, then this is probably on totally the wrong track, so I would recommend posting your actual "fetch result from db" code in your question.

Upvotes: 1

Related Questions