在 Slim 模板中将数据从 Phoenix 发送到 Javascript

Question

我想出了一个办法，在 HTML 属性中定义一个变量，如下所示：

div data-name=some_var id="component"

然后从Javascript我可以检索它：

alert($("#component").data("name"));

但是，我觉得很丑。还有其他方法可以实现吗？

Answer 1

您可能觉得这很脏，但这是从后端向前端发送数据的最有效方式。 In fact, it's pretty common.

发送数据的其他方式总是涉及制作一个单独的 web-request，这在大多数情况下通常是不需要的。

并且由于您使用的是 jQuery，它还抽象了实现，因此您可以在 data- 属性中发送一个纯 JSON 对象，并且可以使用它而不必在 client-side.

上解析它

div id='item' data-obj='{"foo":"bar"}'

在你的 JS 中：

$('#item').data('obj') // {foo: bar}

相关资源：

Answer 2

我通常是这样做的：

div id="component"
javascript:
  var templateData = {
    name: '<%= @name %>',
    product_str: '<%= Poison.encode!(@product) %>',
  };

您可能需要安装 Poison 才能将数据编码为 JSON。

Send data from Phoenix to Javascript in Slim template