Question

我正在尝试在Meteor中构建一个适度可重用的复杂组件。它将包含在具有相似数据结构的多个模板中，我正在努力实现类似Angular Directive的功能。

数据上下文如下所示：

var post = {
    title: 'A test post',
    author: 'Joe Bloggs',
    bookmarked: true,
    bookmarkCount: 25
}

在HTML模板中，我有类似的内容：

<template name="postDetail">
    <div class="jumbotron">
       <h3>{{title}}</h3>
       {{> footerLinks}}
    </div>
</template>

footerLinks 模板是我正在尝试构建的可重用组件。我想让它尽可能自包含，它有自己的js逻辑。简化版本是：

<template name="footerLinks">
   {{author}} · {{formattedBookmarkCount}}
</template>

{{author}} 直接来自数据上下文。我想使用一个函数来构建书签计数的文本。令人惊讶的是，这不起作用，它甚至没有返回默认值。

Template.footerLinks.helpers({
   updatedAt: 'wow',
   formattedBookmarkCount: function () {
      switch (bookmarkCount) {
         case 0:
            return "No bookmarks";
         case 1: 
            return "1 bookmark";
         default:
            return bookmarkCount + " bookmarks";
         } 
      }
   });

但无论如何我想保持实际的帮助简单并引用外部函数。例如：

Template.footerLinks.helpers({
   updatedAt: 'wow',
   formattedBookmarkCount: formatBookmarks(bookmarkCount)
});

.... somewhere else ....
function formatBookmarks(bookmarkCount) {
    // call another function 
    return calcMessage(bookmarkCount);
}

function calcMessage(bookmarkCount) {
    return bookmarkCount + " bookmarks";
}

为了更进一步，我想在子功能中访问其他Meteor集合。

PARTIAL ANSWER

感谢@ steph643指出使用这个。以下代码现在可以使用：

Template.footerLinks.helpers({
   updatedAt: 'wow',
   formattedBookmarkCount: function() {
      switch (this.bookmarkCount) {
         case 0:
            return "No bookmarks";
         case 1: 
            return "1 bookmark";
         default:
            return this.bookmarkCount + " bookmarks";
         }
   },

但我希望将此逻辑移到别处，并可能像这样调用它（这不起作用）：

Template.footerLinks.helpers({
    updatedAt: 'wow',
    formattedBookmarkCount: formatBookmarks()
}

Template.registerHelper('formatBookmarks', function() {  
   return this.bookmarkCount + " bookmarks"; 
}

这将返回错误

Uncaught ReferenceError: formatBookmarks is not defined

Answer 1

这主要是一个javascript的东西。当你注册一个助手时，你要传入一个里面有一堆方法的对象。流星做它的魔力和把它们放在反应环境中。如果你想在助手里面使用这个功能，那么就像你一样使用全局帮助器，只需将全局重命名为你想要的＆amp;删除本地帮助程序。

第二种选择是创建一个全局功能＆amp;通过助手来称呼它。

window.formatCount = function(count, singular, plural) {
  switch (count) {
    case 0:
      return "No " + plural;
    case 1:
      return count + ' ' + singular;
    default:
      return count + ' ' + plural;
  }
};

Template.registerHelper('formatBookmarksCount', function() {  
   return window.formatCount(this.bookmarkCount, 'bookmark', 'bookmarks')
}

现在您可以在客户端的任何地方使用它了。你可以考虑命名一个全局对象的命名空间，以避免在你想要的时候使用window（关于这个问题的SO上有很多帖子）。

从Meteor Template助手调用外部函数

1 个答案: