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

Question

我找到了一种方法，在HTML属性中定义一个变量，如下所示：

div data-name=some_var id="component"

然后从Javascript我可以检索它：

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

然而，它对我来说看起来很难看。还有另一种方法可以达到这个目的吗？

Answer 1

这可能会让你感到肮脏​​，但这是从后端向前端发送数据的最有效方式。 In fact, it's pretty common.

其他发送数据的方式总是涉及单独的网络请求，这在大多数情况下通常是不需要的。

由于您正在使用jQuery，它还会抽象实现，因此您可以在data-属性中发送纯JSON对象，并且可以使用它而无需在客户端解析它。

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

并在你的JS中：

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

相关资源：

• Stackoverflow：Store JSON object in data attribute in HTML jQuery
• MDN：Use Data Attributes
• 博文：Using HTML 5 Data Attributes

Answer 2

我通常这样做：

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

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