0

我有一个 Rails 应用程序，我想在页面上使用 Google Charts。因此，在视图中，我加载了 javascript 文件（其中包含 Google Charts 代码）以显示图表：

content_for(:head) do
  = javascript_include_tag 'infograph'

#chart_div{"data-hours" => @billable_hours }

这一切都很好，显示了图表。但是，我有一个变量 ``@hours``` 我想传递给 javascript 文件，因为它包含图形数据。我怎样才能做到这一点？

我读过有关使用数据标签的信息#chart_div{"data-hours" => @billable_hours }，但我不知道如何在 Javascript 文件中使用它。使用alert(data('hours'));似乎不起作用。我怎样才能做到这一点？谢谢！

4

1 回答 1

1

初始数据

使用数据属性是在 javascript 中初始化数据的正确方法：当您呈现页面时，数据会附加到 DOM 元素，因此 javascript 可以在执行时访问它，在 DOMReady 上。

香草 javascript

使用纯 javascript，您必须在 dom 元素上检索它：

document.querySelect('#chart_div').getAttribute('data-hours')

请注意，它始终是一个字符串（如果属性不存在，则为未定义），因此如果您想要其他任何内容，则必须自己进行类型转换：

var myInt = parseInt(document.querySelect('#chart_div').getAttribute('data-hours'), 10)

jQuery

如果您使用 jQuery，您可以使用以下方法检索数据.data()：

$('#chart_div').data('hours')

这将为您进行类型转换，并提供一个非常简单的接口来访问数据属性。

但请注意，这是针对初始数据的。如果data-hours在数据容器已经初始化后更改值，则不会反映。因此，使用以下 html ：

<div id="chart" data-hours="10"></div>

这将在 DOMReady 之后发生：

# data() is correctly initialized
$('#chart').data('hours') # => 10

# changing attribute does not reflect in data container
$('#chart').attr('data-hours', 7)
$('#chart').attr('data-hours') # => 7
$('#chart').data('hours') # => 10

# changing data container does not reflect in attribute
$('#chart').data('hours', 5)
$('#chart').data('hours') # => 5
$('#chart').attr('data-hours') # => 7

这里要记住的是，jQuery 的.data()方法实际上处理了一个分离的容器，它的默认值是data-*从 dom 元素的属性初始化的。

如果要从初始data-*属性已更改的元素中检索数据，则必须使用.attr()（并自己进行类型转换）。

大数据或异步数据

如果您开始要传递大量数据，则应避免使用数据属性：我没有任何意义的 html 页面，其中数据属性占页面的一半或三分之一。

在这种情况下，您应该推迟 js 初始化并通过 ajax 请求数据。这也是页面初始化后传递数据的方式。

例如，如果您在一个Item在页面初始加载时加载几个 s 的索引页面上，然后通过异步 javascript 加载它们的大量集合，您可以在控制器中执行类似的操作：

class ItemsController < ApplicationController
  def index
    respond_to do |format|
      format.html { @items = Item.all.limit(5) }
      format.json { render json: { items: Item.all.limit(1000) } }
    end
  end
end

使用 jQuery，您可以使用它$.getJSON来检索您的大型集合：

$.getJSON( '/items', function(items){ console.log(items) });

您现在可以使用您的数据代替 that console.log，所有常见类型（整数、浮点数、数组、对象/哈希、字符串）都已按预期转换。

附言

哦，顺便说一句：

#chart_div{"data-hours" => @billable_hours }

有专门的语法：

#chart_div{ data: { hours: @billable_hours } }

当您拥有四个数据属性中的三个时，它作为速记特别有用。

于 2013-10-17T08:29:29.537 回答