小编krz*_*ysu的帖子

我希望大家都知道pinterest样式布局及其行为:

• 我们收集了许多(比方说1000)产品
• 在页面加载时,我们只显示该集合的一小部分(即20个第一产品)
• 当用户向下滚动并到达页面底部时,我们将呈现下20个产品
• 页面由许多客户端查看,每个客户端都有自己的一组显示的产品

奖金任务:

• 当Products集合获取新项目时,它们将显示在页面顶部(作为显示的产品列表中的第一项)

我在想如何用Meteor方式编写逻辑.让我们跳过用户界面代码,我只对业务逻辑感兴趣.

我正在考虑将ProductsDisplayed集合作为帮助器,它是空的并且在页面加载时由20个产品填充,然后当达到滚动点时,我从原始产品集合中插入20个产品等.

问题:

• 如何在客户端之间使用不同的ProductsDisplayed集合,
• 如何从产品系列中询问下20种产品,而不是之前的产品

但也许关于ProductsDisplayed的整个想法是错误的.我很想知道你的想法!

更新!
我改变了只使用Products系列的方法.

服务器:

Meteor.publish "productsDisplayed", (number) ->
  Products.find {},
    limit: number

客户:

Meteor.autosubscribe ->
  Meteor.subscribe "productsDisplayed", Session.get('productsDisplayedNumber')

当达到滚动点时,递增20个Session'productsDisplayedNumber'.但是自动订阅使得整个模板被重新渲染,而不仅仅是新元素.有任何想法吗？

我有一个建立在 Gatsby 上的博客。帖子是用markdown写的。我也在使用 gatsby-remark-images。到目前为止一切都很棒。我想添加更多选项来对齐/格式化博客文章中的图像。即一排两三个图像的画廊，每个图像的不同尺寸选项等。到目前为止，我的研究没有带来任何解决方案。我可以直接在 Markdown 文件中使用 HTML，但是我失去了 gatsby-remark-images 的所有优势，因为 HTML 的内容没有作为 Markdown 处理。

<div class="gallery">
    <div class="gallery__item">
        ![image to the left](./left.jpg) <- is not processed
    </div>
    <div class="gallery__item">
        ![image to the right](./right.jpg)
    </div>
</div>

我也不能向图像添加任何 CSS 类。我在一些“markdown-extra”编译器中看到了如下解决方案。

![image](./image.jpg){.some-class}

Gatsby 支持自定义组件 ( https://using-remark.gatsbyjs.org/custom-components/ )。自定义组件是否仍允许将子组件作为降价处理？像下面的例子那样可能吗？

<image-gallery>
    ![image1](./1.jpg)
    ![image2](./2.jpg)
</image-gallery>

你能推荐任何其他解决方案吗？我只想更灵活地使用图像样式，并为每个图像或一组图像提供选项。与在 Medium 上添加图像相比。您可以使它们全屏显示、适合容器或浮动到一侧。我想我只需要能够将不同的 CSS 类传递给图像或其容器，其余的都很容易。

有任何想法吗？

我需要告知客户有关服务器端的更改.在我的情况下,我在服务器和客户端上使用不同的集合(在这个问题中更多关于它:如何使用meteor.js构建像页面一样的pinterest).

在服务器上,我从外部API获取新产品.我想向所有客户发布新项目的数量,他们可以更新布局运行良好所需的局部变量.怎么做？

如果我可以发布/订阅除Meteor.Collection之外的其他类型的数据,那将是很好的.我找到了Meteor.deps,但据我所知,它仅适用于客户端.