初始数据

Question

我有一个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'));似乎不起作用。我怎样才能做到这一点？谢谢！

Answer 1

初始数据

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

香草javascript

使用普通的javascript，你必须在dom元素上检索它：

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

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

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()方法实际上处理一个单独的容器，默认值是从dom元素的data-*属性初始化的。

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

大数据或异步数据

如果您开始要传递大量数据，则应避免使用数据属性：我没有理由拥有一个html页面，其中数据属性计算页面的一半或三分之一。

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

例如，如果你在一个索引页面上加载了一些Item页面初始加载，然后通过异步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) });

您现在可以使用您的数据代替console.log，所有常见类型（整数，浮点数，数组，对象/散列，字符串）已按预期方式投放。

PS

哦，顺便说一句：

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

有一种专用语法：

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

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

将变量发送到javascript

1 个答案:

初始数据

香草javascript

的jQuery

大数据或异步数据

PS