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

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

div data-name=some_var id="component"

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

然后，我可以从Javascript检索它：

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

---

然而，它在我看来很难看。有没有其他方法可以做到这一点？

这可能会让您感到不舒服，但这是从后端向前端发送数据的最有效的方法

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

---

由于您使用的是jQuery，它还抽象了实现，因此您可以在

data-

属性中发送纯JSON对象，并且可以使用它，而无需在客户端解析它

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

在你的JS中：

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

---

相关资源：

• 堆栈溢出：
• MDN：
• 博文：

---

我通常这样做：

div data-name=some_var id="component"

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

div id=“组件”
javascript:
var templateData={
名称：“”，
产品编号：''，
};

---

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

唯一的其他方法是通过请求（附加的体系结构注意事项）或将其存储在cookie中（额外的代码和检索值的复杂性）。虽然我同意在html中嵌入数据以使用javascript理论上有点难看，但这是最简单的方法，我觉得使用

meta

标记并在前端读取元素后从DOM中删除元素会更好。好吧，看起来这是目前最好的解决方案，如果我们必须使用html标记，meta标记是一个好主意。您还可以定义一个脚本标记，将其设置在

窗口

范围内