Shopify Liquid 标签 javascript 渲染

Question

我有一个这样定义的自制液体标签：

class SomeList < Liquid::Block
  def render(context)
    context.stack do
      context['list_items'] = get_back_list_items()
      render_all(@nodelist, context)
    end
  end
end

然后可以在这样的模板中使用它：

{% some_list %}
  {% for item in list_items %}
    <p>{{ item.name }}</p> 
  {% endfor %}
{% endsome_list %}

我想为这个标签添加一个“加载更多”功能，它可以由 JS 调用触发。我无法控制模板中块内的内容。

我有个主意：

• 当标签被渲染时，我也在 dom 中以 JSON 格式输出它的 nodelist
• 然后，我在某处添加一个 Ajax 调用，该调用将调用一个控制器。在这个调用中，我传输标签原始节点列表
• 在我的控制器中，我实例化了一个上下文，并以某种方式将节点列表传输到我的标签并使用一些新参数重新渲染它
• 我终于在 dom 中重新渲染了

不确定这是否是正确的方法。我觉得我一定不是唯一一个试图实现这一目标的人，也许存在更好的解决方案。无论如何，我仍然无法在实例化后将序列化的节点列表 JSON 加载到标签中......

Answer 1

执行此操作的一种常见方法是在初始页面请求的 DOM 元素 id 中呈现初始列表内容。单击按钮时（在您的情况下为“加载更多”），向后端发送一个 XHR 请求，该请求将以 HTML 片段形式的新扩展列表进行响应。在 XHR 响应中，将容器 DOM 元素的 HTML 替换为新的 HTML（片段）内容。

这样您就不必做复杂的事情，例如将 JavaScript 对象同步到 DOM。您只需将 DOM 内容替换为新内容。 JavaScript 会以原子方式完成这一切，因此对用户来说会很流畅。

原始请求和后续的部分请求都可以由您的 Liquid 标签呈现。