易搜索流星

Question

可以通过微调器更改easySearch搜索包的按钮加载更多吗？给你风格？根据文档可以给出的风格，我试图让它工作，但到目前为止我还没有成功。

{{> EasySearch.LoadMore index=myIndex content="Load more content"}}

参数

内容：按钮

的内容 属性：带有按钮的对象 属性(例如 { 类："加载更多按钮" }( 计数：要加载的文档数

Answer 1

不幸的是，您将无法从"按钮"更改为"微调器"，因为EasySearch.LoadMore组件实际上呈现了一个HTML按钮元素(请参阅下面取自EasySearch源代码(。

<template name="EasySearch.LoadMore">
    {{#if moreDocuments}}
        <button {{attributes}}>{{content}}</button>
    {{/if}}
</template>

即使您不能更改为微调器，您至少可以使用 attributes 参数(您在问题中提到(设置"按钮"的样式。 为此，只需传递一个包含 class 属性的对象。 由于您无法在空格键中定义对象文字，因此您必须创建一个模板帮助程序来执行此操作(如下面的示例所示(。

Template.mySearch.helpers({
  loadMoreAttributes: function() {
    return {
      class: "load-more-button"
    }
  },
});

然后像这样在模板中使用您的帮助程序。

{{> EasySearch.LoadMore index=myIndex content="Load more content" attributes=loadMoreAttributes}}

这将为您的"加载更多"按钮提供 load-more-button 的 css 类。 然后，您可以在 css 中设置它的样式，如下例所示。 显然，您将使用所需的样式...这纯粹是示例。

.load-more-button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}