Rails 3.1 带有 Flot 的不显眼的 Javascript

发布于 2024-12-28 22:44:09 字数 1319 浏览 0 评论 0原文

所有，

我在我的 Rails 应用程序中使用 Flot 图形库。我目前有一个页面按预期工作，但是用于组合 flot 图表的所有 javascript 都内联在我的“view”.html.erb 文件中。

有没有一种简单的方法可以将 javascript 的静态部分移动到外部文件，在视图/控制器中照常生成动态数据，并将其传递给 javascript 文件？（通过“数据消息”？？）

基本布局如下所示：

控制器：

@portfolios = # a bunch of portfolios

视图：

<script type="text/javascript">
jQuery(document).ready(function($) {
  // show & hide some stuff
  var options = {
   .......
  };

// THIS IS THE DYNAMIC PORTION

var portfolio_collection = []
var id_lookup = []

<% @portfolios.each do |portfolio| %>
  <% attribute1 = portfolio.attribute1 %>
  <% attribute2 = portfolio.attribute2 %>
  portfolio_collection.push([<%= attribute1 %>,<%= attribute2 %>]);
  id_lookup.push([<%= portfolio.id %>]);
<% end %>

// END DYNAMIC

var plot = $.plot(  // This is the plot command, puts graph in #select div
      $("#select"),
       [ { data: portfolio_collection, label: "Return"} ], 
       options
    );

// A SCHWACK OF JAVASCRIPT
........

</script>

<h1>My HTML content...</h1>

<br />
<div id="select" style="width:600px;height:300px;"></div>
.... a bunch of other divs which renders javascript results from clicking on the graph ....

原文

All,

I am using the Flot graphing library in my rails application. I currently have a page working as expected, however all of the javascript for putting together the flot graph is inline in my "view".html.erb file.

Is there an easy way to move the static part of the javascript to an external file, generate the dynamic data as regular in the view/controller, and pass it to the javascript file? (through "data-message"??)

The basic layout looks like this:

Controller:

@portfolios = # a bunch of portfolios

View:

<script type="text/javascript">
jQuery(document).ready(function($) {
  // show & hide some stuff
  var options = {
   .......
  };

// THIS IS THE DYNAMIC PORTION

var portfolio_collection = []
var id_lookup = []

<% @portfolios.each do |portfolio| %>
  <% attribute1 = portfolio.attribute1 %>
  <% attribute2 = portfolio.attribute2 %>
  portfolio_collection.push([<%= attribute1 %>,<%= attribute2 %>]);
  id_lookup.push([<%= portfolio.id %>]);
<% end %>

// END DYNAMIC

var plot = $.plot(  // This is the plot command, puts graph in #select div
      $("#select"),
       [ { data: portfolio_collection, label: "Return"} ], 
       options
    );

// A SCHWACK OF JAVASCRIPT
........

</script>

<h1>My HTML content...</h1>

<br />
<div id="select" style="width:600px;height:300px;"></div>
.... a bunch of other divs which renders javascript results from clicking on the graph ....

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兰花执着 2025-01-04 22:44:09

为了解决这个问题，我所做的是将 flot 脚本移至 Portfolio.js 文件。然后我绑定了一个点击事件来生成流程图。在anchortab中我放了这样的东西

<a id="generate" data-var="<%=@portfolo_data%>" data-var="<%=@portfolo_options%>">Generate Graph</a>

然后在js文件中我像这样拉动了调用

$(function (){
    $("#generate").click( (event) {
        event.preventDefault();
        eval("var data =" +  $("#generate").data("var") + ";");
        eval("var options =" + $("#generate").data("options") + ";");
        $.plot($("#select"), data, options);
    });
});

剩下要做的就是在投资组合控制器中构建@portfolio_data和@portfolio_options字符串。

What I did to get around this issue, is move the flot script to the portfolios.js file. Then I bound a click event to generate the flot graph. In the anchortab I put something like this

<a id="generate" data-var="<%=@portfolo_data%>" data-var="<%=@portfolo_options%>">Generate Graph</a>

Then in the js file I pulled the call like this

$(function (){
    $("#generate").click( (event) {
        event.preventDefault();
        eval("var data =" +  $("#generate").data("var") + ";");
        eval("var options =" + $("#generate").data("options") + ";");
        $.plot($("#select"), data, options);
    });
});

All that is left to do is build out the @portfolio_data and the @portfolio_options strings in the Portfolio Controller.

回复收藏 0 原文

~没有更多了~