简体   繁体   中英

How do I change template helper function in Spacebars after template has been rendered?

Currently I have a section on my Meteor.js website that renders tags from a reactive collection in a Spacebars Template .

I do something simple like this:

//Coffeescript Template Helper
Template.Albums.tags = ->
    tags = []
    _.each Albums.find({}).fetch(), (albumObject, index) ->
        tags = _.union(albumObject.tags, tags)
    return tags;


<!-- Spacebars Template -->
<template name="tagsTemplate">
    {{#each tags}}
         <li class="interfaceItem">
             <a class="tag" href="{{this}}/">
                 {{this}}
             </a>
         </li>
    {{/each}}
</template>

This works reactively as it should.

My question is:

How can I change what the helper is returning and force an update to the template?


I desire to filter the results of the tags based on a search bar.
So, when the user starts typing into a tagsSearchBar , I need to change what's displayed in the tagsTemplate .

I can do the text search and return the results, but I'm not sure how I go about updating the helper and then forcing the template to reload.
If I try to simply change the template helper function's definition, then the template doesn't update to the new definition (I think the template is unaware of the helper function's definition change).

Basically, I am trying to figure out how to do Spacebar reactivity for my own purposes.

Thanks everyone!

If you really want to change the helper function and have the template re-render when you do so, one approach would be to store the function in a reactive variable, then in your helper, get the function from the reactive variable and execute it. Unfortunately you can't store functions in the Session, so you'd have to use Deps.Dependency :

defaultTagFunction = ->
  tags = []
  _.each Albums.find({}).fetch(), (albumObject, index) ->
      tags = _.union(albumObject.tags, tags)
  return tags

searchTagFunction = ->
  # do something else

tagFunction = ->
tagFunctionDependency = new Deps.Dependency()

Template.Albums.tags = ->
  tagFunctionDependency.depend()
  return tagFunction() # tagFunction.call(this) if you need the data context

setTagFunction = (fn) ->
  tagFunction = fn
  tagFunctionDependency.changed()

setTagFunction(defaultTagFunction)

# later
setTagFunction(searchTagFunction)

However, there's probably a more appropriate solution. If the behaviour of the interface when you've typed into the search bar is totally different to when the search bar is empty, you probably want a separate template, and then decide which template to show reactively. If the behaviour is mostly the same, it's probably simpler just to add this logic to the existing helpers, something like:

Template.Albums.tags = ->
  searchText = Session.get("tagsSearchBar")
  if searchText is ""
    cursor = Albums.find({})
  else
    cursor = Albums.find({tags: searchText})

  tags = []
  _.each cursor.fetch(), (albumObject, index) ->
      tags = _.union(albumObject.tags, tags)
  return tags

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM