Ruby Slim - 在 DOM 属性中嵌入 JSON

Posted 2023-05-09

【中文标题】Ruby Slim - 在 DOM 属性中嵌入 JSON

【英文标题】：Ruby Slim - Embed JSON in DOM Attribute

【发布时间】：2021-11-02 02:46:12

【问题描述】：

如何使用 SLIM 和 Rails 将 JSON 字符串作为数据属性嵌入到 DOM 元素中。我设法使用 ERB 做到了这一点。

我想将 Ruby 哈希嵌入到 DOM 元素的数据属性中。

product_data = 
  name: "Test Product",
  price: 100_00,

我想用 SLIM 完成类似的事情：

<div data-product-info='"name": "Test Product", "price": 10000'></div>

这样我就可以像这样在 JS 中阅读它：

var productInfo = $('#product-modal').data('product-info');
cosole.log(productInfo.name);

在 ERB 中，我会做这样的事情：

<div data-product-info="<%= product_info.to_json %>"></div>

我尝试了各种方法在 SLIM 中完成它，但我迷路了。不幸的是，使用 ERB 不是一种选择。这是因为我在 Trailblazer Cell 中使用它，由于某种原因，不支持 ERB。

即使我使用纯字符串，我也会遇到以下问题：

#product-modal.modal.fade[tabindex="-1" role="dialog" aria-label="myModalLabel" aria-hidden="true" data-test='"a": 10, "b": 20']

<div aria-label="myModalLabel" class="modal fade show" data-product-info="" name":="" 10000,="" "price":="" 10000"="" id="product-modal" role="dialog" tabindex="-1" aria-modal="true" style="display: block;">

【问题讨论】：

使用 JSON 对开拓者有什么要求吗？当您可以只对每个属性使用一个数据属性而不需要处理转义（这就是您的代码不起作用的原因）或在客户端解析它时，这似乎有点奇怪，element.dataset 将包含每个属性的键无论如何数据属性。

你可以做类似#product-modal.modal.fade[..., data-test=escape_javascript(product_info.to_json)]的事情。虽然这真的很长而且很麻烦，但您应该考虑编写一个辅助方法。

@max 这不是开拓者的要求。我唯一的问题是即使包含cells-erb，它也没有检测到erb文件。我不确定这是否是cells-slim 问题。这就是我提到它的原因。

@max 我需要传递大约 20 个属性。到模态。产品信息是传递给模态的配置选项之一。我试图在"#j(....to_json)" 行中做某事，但没有成功。我还认为我将不得不使用多个数据属性。

@max：我认为使用#product-modal[ ... ] 配置元素是一个限制。相反，当使用 #product-modal* ... 时，它会按预期工作。

【参考方案1】：

如果您遇到类似情况，可以将 JSON 数据作为属性（或数据属性）包含在内。

这似乎是我定义元素属性的方式的限制。

#product-modal.modal.fade[tabindex="-1" role="dialog" aria-label="myModalLabel" aria-hidden="true" data-product-info=(product_modal_data model.product)]

改为使用*

#product-modal.modal.fade*tabindex: "-1", role: "dialog", "aria-label" => "myModalLabel", "aria-hidden" => "true", "data-product-info" => a: 10, b: 20.to_json

我希望我能知道* 的名称，但它是星期六。我会在星期一更新答案。