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

Posted 2023-03-05

【中文标题】在 Slim 模板中将数据从 Phoenix 发送到 Javascript

【英文标题】：Send data from Phoenix to Javascript in Slim template

【发布时间】：2018-08-20 07:13:55

【问题描述】：

我已经找到了一种方法来做到这一点，在 html 属性中定义一个变量，如下所示：

div data-name=some_var id="component"

然后我可以从 javascript 中检索它：

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

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

【问题讨论】：

唯一的其他方法是通过请求（额外的架构考虑）或将其存储在 cookie 中（额外的代码和复杂性来检索值）。虽然我同意理论上将数据嵌入到 html 中以供 javascript 使用有点难看，但这是最简单的方法，我觉得通过使用 meta 标签并在它被删除后从 DOM 中删除元素会更好一些。在前端读取。

好的，看起来这是目前最好的解决方案，如果我们必须使用 html 标签，元标签是个好主意

您还可以定义一个脚本标签，将其设置在window 范围内

【参考方案1】：

我通常是这样做的：

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

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

【参考方案2】：

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

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

---

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

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

在你的 JS 中：

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

---

相关资源：

堆栈溢出：Store JSON object in data attribute in HTML jQuery MDN：Use Data Attributes 博文：Using HTML 5 Data Attributes