重用组件

Question

有人可以帮助我更好地理解组件、查询等吗？我正在为一项看似微不足道的任务而苦苦挣扎，我需要一个带有参数化查询的组件。该组件的实例需要包含在 parent 组件中，例如，我想要一份不同种类水果的清单，这些水果需要分发给一组孩子，每一行都会显示孩子的名字和一种水果的数量：

  (defui FruitsLedger

    static om/IQuery
    (query [this]
      '[(:data/fruits) {:kind ?kind}])

    Object (render [this]
            (let [{:keys [data/fruits]} (om/props this)]
              (dom/ul nil (apply #(dom/li nil (str "for " (% :kid) " " (% :qt))))))))

现在我需要让我们说这个组件在另一个组件中的两个实例

其中 :params

第一个例子是：{:kind :apples}

第二个实例是：{:kind :oranges}

这应该呈现 2 个类似于此的列表：

  | apples        | oranges       |
  |---------------+---------------|
  | for Aaron 2   | for Katie 1   |
  | for Dan 1     | for Rob 3     |
  | for Charles 0 | for Charles 3 |
  |               |               |
  |---------------+---------------|

Answer 1

我确信参数化查询有其用途。但也许这个问题和其他类似的问题可以在不求助于它们的情况下得到解决。

您的数据库中有 :app/fruit-query-kinds（默认数据库格式）。这将是一份水果清单。您已经有了水果组件，但您将需要另一个组件，它具有作为查询目的的水果种类列表的想法。给这个组件一个查询和一个标识。是否要显示并不重要。最重要的是让数据结构正确。它的标识类似于：'[:fruit-query-kind/by-id 1100]，它可能由 '[:fruit/by-id 10] 和 '[:fruit/by-id 20] 组成。根据您的示例，10 将是苹果的 ID，20 将是橙子的 ID。这将是键 :app/fruit-query-kinds 的 refs 值（默认数据库存储中的标识向量）。 1100 只是一个不会改变的唯一数字。

数据结构很重要，一切都可以在里面建模，甚至查询参数。

您将需要在某处调用 transact! 的突变和一些按钮（或其他输入），这些按钮会直接更改数据库中的水果查询种类。如果您不需要任何重新渲染，请使用应用程序的调节器而不是组件调用 transact!。

我们的想法是您可以 component/s 查询用户之前做出的选择。因此，您的第一个列表组件不会知道它是用于苹果的——它所知道的只是显示第一种水果查询类型的水果。

我发现您可以根据需要在视图和数据库之间做尽可能多的来回，让数据库不仅存储数据而且视图的当前状态。到目前为止，我遇到的唯一一次麻烦是当我错误地处理组件查询中布尔键的 not 时。当然，这最终会出现在永远闪烁的屏幕上。

在我看来，在客户端上使用 Om Next 的简单方法是让您的所有读取看起来完全相同，全部使用 db->tree。一旦您接受了这种方法，下一步就是一起摆脱它们，您可以通过切换到 Untangled 框架来做到这一点。

重用组件

Reusing components

clojurescript

om-next