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标签呈现。

Shopify Liquid标签JavaScript呈现

1 个答案: