【问题标题】:How do I change template helper function in Spacebars after template has been rendered?渲染模板后,如何在空格键中更改模板助手功能?
【发布时间】:2014-07-14 20:22:09
【问题描述】:

目前,我的 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>

基本上,我想弄清楚如何为自己的目的进行空格键反应。

谢谢大家!

【问题讨论】:

  • 对于任何看到这个问题的人,我也发现了这个example。这对我很有帮助。

标签: javascript meteor reactive-programming spacebars


【解决方案1】:

如果您真的想更改辅助函数并在这样做时重新渲染模板,一种方法是将函数存储在反应变量中,然后在您的助手中,从反应变量中获取函数并执行它。不幸的是,你不能在 Session 中存储函数,所以你必须使用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

【讨论】:

  • 没有简单的方法来强制更新模板,或强制调用助手?假设我将一个字符串传递给一个助手并希望返回 true 或 false。在页面 /tag1/tag2 上说 tag1 的 lastTagHelper 为 false,而 tag2 为 true。然后,使用 Iron-Router,我导航到 /tag1/tag2/tag3,现在 tag2 的 lastTagHelper 为 false,但模板不知道对此更新做出反应。有没有简单的方法可以做这样简单的事情?非常感谢!
  • 我不确定我是否完全理解了这个问题 - lastTagHelper 是从布局模板中调用的吗?在这种情况下,您可以在该帮助程序中使用Router.current() 来响应式地获取当前页面。您可以使用伪造的Deps.Dependency 来强制更新,但 Meteor 的方式是使用反应变量访问数据,因此您不必担心手动强​​制更新。
  • 最终我只使用了Deps.Dependency,这似乎是强制模板助手变为响应式的最简单方法。我相信 Meteor 团队最终会添加一些功能,让这样的事情变得更容易。 :)
猜你喜欢
  • 2014-07-23
  • 2015-01-15
  • 1970-01-01
  • 2012-07-21
  • 2015-10-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多