Shopify 液体标签 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 中的 output 其nodelist在 JSON
• 然后，我在某处添加了一个 Ajax 调用，该调用将调用 controller。 在这个调用中，我传输标签原始节点列表
• 在我的 controller 中，我实例化了一个上下文并以某种方式将节点列表传输到我的标签并使用一些新参数重新渲染它
• 我终于在 dom 中重新渲染

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

Answer 1

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

这样您就不必执行复杂的操作，例如将 JavaScript 对象同步到 DOM。 您只需将 DOM 内容替换为新内容。 JavaScript 将自动完成这一切，因此对用户来说看起来很流畅。

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