EasySearch 流星

Question

是否可以通过微调器更改 easySearch 搜索包的按钮加载更多？给你风格？根据文档可以给的样式，我试过使它起作用，但到目前为止我还没有成功。

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

Parameters

content: The content of the button attributes: Object with the button attributes (e.g. { class: "load-more-button" }) count: Number of documents to load

Answer 1

不幸的是，您将无法从 'button' 更改为 'spinner'，因为 EasySearch.LoadMore 组件字面上呈现 HTML 按钮元素（见下图）来自 EasySearch source).

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

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

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

然后像这样在您的模板中使用您的助手。

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

这将使您的 "load more" 按钮成为 css class 的 load-more-button。然后你可以像下面的例子一样在 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;
}

EasySearch 流星

EasySearch meteor

mongodb

meteor

meteor-blaze