如何在渲染模板后更改Spacebars中的模板辅助函数?

时间:2014-05-26 06:07:17

标签: javascript meteor reactive-programming spacebars

目前,我的 Meteor.js 网站上有一个部分,可以在空格键模板中呈现来自反应式集合的标记。

我做这样简单的事情:

//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>

这应该是应有的反应。

我的问题是:

  

如何更改助手返回的内容并强制更新   模板?


我希望根据搜索栏过滤标签的结果 因此,当用户开始输入 tagsSearchBar 时,我需要更改 tagsTemplate 中显示的内容。

我可以进行文本搜索并返回结果,但我不知道如何更新帮助程序然后强制模板重新加载。
如果我尝试简单地更改模板辅助函数的定义,那么模板不会更新到新定义(我认为模板不知道辅助函数的定义更改)。 / p>

基本上,我正试图弄清楚如何为我自己的目的做空格键反应。

谢谢大家!

1 个答案:

答案 0 :(得分:1)

如果你真的想要改变辅助函数并在你这样做时重新渲染模板,一种方法是将函数存储在一个反应​​变量中,然后在你的帮助器中,从反应变量中获取函数,执行它。遗憾的是,您无法在会话中存储功能,因此您必须使用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)

但是,这可能是一个更合适的解决方案。如果您在搜索栏中输入的界面行为与搜索栏为空时的行为完全不同,您可能需要一个单独的模板,然后决定要反应显示哪个模板。如果行为大致相同,那么将此逻辑添加到现有帮助程序可能更简单,例如:

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