在rails中访问js变量/值，反之亦然
accessing js variables/values in rails and vice versa
所以我的问题是，我需要找到一种方法，使由下面的代码创建的图形，以保存值到我在rails中创建的选票。选票工作与手动值显示在代码的最后几行，但我需要从图中抓取值提交，我还需要找出一种方法，从选票的值加载回图。
到目前为止，我尝试了一种gem，但没有成功，也尝试了一大堆其他的方法，但都没有成功。
**editablegraph.html.erb**
<div class="container-fluid" id="graphT" style="width:300px;height:700px;">
<script style="text/javascript">
var paper3 = Raphael("graphT");
var val1T = 0 * 6;
var val2T = 0 * 6;
var val3T = 0 * 6;
var val4T = 0 * 6;
var val5T = 0 * 6;
var begin1 = val1T;
var begin2 = val2T;
var begin3 = val3T;
var begin4 = val4T;
var begin5 = val5T;
var load = function()
{
paper3.clear();
var bar1 = paper3.set();
bar1.push(
paper3.rect( 30, 650 - val1T, 40, val1T)
.attr({
fill : "80-#151515-#000",
opacity : .8,
stroke : "none"
}),
paper3.path( paralel3( val1T, 30))
.attr({
fill : "#000",
opacity : .6,
stroke : "none"
}),
paper3.path( paralel4( val1T, 30))
.attr({
fill : "90-#151515-#000",
opacity : 1,
stroke : "none"
}),
paper3.text( 40, 630 - val1T, Math.floor(val1T/6).toString() )
.attr({
"font-size" : 18,
"font-family" : "Times-Bold",
fill: "#fff"
})
);
var bar2 = paper3.set();
bar2.push(
paper3.rect( 86, 650 - val2T, 40, val2T)
.attr({
fill : "80-#151515-#39f",
opacity : .8,
stroke : "none"
}),
paper3.path( paralel3( val2T, 86))
.attr({
fill : "#39f",
opacity : .6,
stroke : "none"
}),
paper3.path( paralel4( val2T, 86))
.attr({
fill : "90-#151515-#39f",
opacity : 1,
stroke : "none"
}),
paper3.text( 96, 630 - val2T, Math.floor(val2T/6).toString() )
.attr({
"font-size" : 18,
"font-family" : "Times-Bold",
fill: "#fff"
})
);
var bar3 = paper3.set();
bar3.push(
paper3.rect( 142, 650 - val3T, 40, val3T)
.attr({
fill : "80-#151515-#73b",
opacity : .8,
stroke : "none"
}),
paper3.path( paralel3( val3T, 142))
.attr({
fill : "#73b",
opacity : .6,
stroke : "none"
}),
paper3.path( paralel4( val3T, 142))
.attr({
fill : "90-#151515-#73b",
opacity : 1,
stroke : "none"
}),
paper3.text( 152, 630 - val3T, Math.floor(val3T/6).toString() )
.attr({
"font-size" : 18,
"font-family" : "Times-Bold",
fill: "#fff"
})
);
var bar4 = paper3.set();
bar4.push(
paper3.rect( 198, 650 - val4T, 40, val4T)
.attr({
fill : "80-#151515-#ee1fa5",
opacity : .8,
stroke : "none"
}),
paper3.path( paralel3( val4T, 198))
.attr({
fill : "#ee1fa5",
opacity : .6,
stroke : "none"
}),
paper3.path( paralel4( val4T, 198))
.attr({
fill : "90-#151515-#ee1fa5",
opacity : 1,
stroke : "none"
}),
paper3.text( 208, 630 - val4T, Math.floor(val4T/6).toString() )
.attr({
"font-size" : 18,
"font-family" : "Times-Bold",
fill: "#fff"
})
);
var bar5 = paper3.set();
bar5.push(
paper3.rect( 254, 650 - val5T, 40, val5T)
.attr({
fill : "80-#151515-#26701c",
opacity : .8,
stroke : "none"
}),
paper3.path( paralel3( val5T, 254))
.attr({
fill : "#26701c",
opacity : .6,
stroke : "none"
}),
paper3.path( paralel4( val5T, 254))
.attr({
fill : "90-#151515-#26701c",
opacity : 1,
stroke : "none"
}),
paper3.text( 264, 630 - val5T, Math.floor(val5T/6).toString() )
.attr({
"font-size" : 18,
"font-family" : "Times-Bold",
fill: "#fff"
})
);
start = function () {
this.odx = 0;
this.ody = 0;
},
move1 = function (dx, dy) {
val1T = begin1-dy;
this.odx = dx;
this.ody = dy;
load();
},
move2 = function (dx, dy) {
val2T = begin2 - this.ody;
this.ody = dy;
load();
},
move3 = function (dx, dy) {
val3T = begin3 - this.ody;
this.ody = dy;
load();
},
move4 = function (dx, dy) {
val4T = begin4 - this.ody;
this.ody = dy;
load();
},
move5 = function (dx, dy) {
val5T = begin5 - this.ody;
this.ody = dy;
load();
},
up1 = function(){
if( val1T < 0 )
{
val1T = 0;
}
else if( val1T > 600 )
{
val1T = 600;
}
begin1 = val1T;
document.getElementById('attra').value = Math.floor(val1T/6);
load();
},
up2 = function(){
if( val2T < 0 )
{
val2T = 0;
}
else if( val2T > 600 )
{
val2T = 600;
}
begin2 = val2T;
document.getElementById('attrb').value = Math.floor(val2T/6);
load();
},
up3 = function(){
if( val3T < 0 )
{
val3T = 0;
}
else if( val3T > 600 )
{
val3T = 600;
}
begin3 = val3T;
document.getElementById('attrc').value = Math.floor(val3T/6);
load();
},
up4 = function(){
if( val4T < 0 )
{
val4T = 0;
}
else if( val4T > 600 )
{
val4T = 600;
}
begin4 = val4T;
document.getElementById('attrd').value = Math.floor(val4T/6);
load();
},
up5 = function(){
if( val5T < 0 )
{
val5T = 0;
}
else if( val5T > 600 )
{
val5T = 600;
}
begin5 = val5T;
document.getElementById('attre').value = Math.floor(val5T/6);
load();
}
bar1.drag( move1, start, up1);
bar2.drag( move2, start, up2);
bar3.drag( move3, start, up3);
bar4.drag( move4, start, up4);
bar5.drag( move5, start, up5);
};
load();
</script>
<%= form_for(@ballot) do |f| %>
<%= f.hidden_field :user_id, value: current_user.id %>
<%= f.hidden_field :target_id, value: @user2.id %>
<%= f.text_field :attr_A, id: "attra" %>
<%= f.text_field :attr_B, id: "attrb" %>
<%= f.text_field :attr_C, id: "attrc" %>
<%= f.text_field :attr_D, id: "attrd" %>
<%= f.text_field :attr_E, id: "attre" %>
<% end %>
<%= link_to "Thy judgment be cast upon the unworthy", vote_path( target_user: @user2, attrA: 20, attrB: 20, attrC: 20, attrD: 20, attrE: 20, ballot: @ballot ), method: "post" %>
</div>
我想我应该补充说这是我的第一个rails应用程序。这是我需要为我的第一个应用程序做的最后一件事之一。
这段代码真的很长。我已经按照你的要求做过了。我建议JSON gem和JSON .js从GUI到rails来回传输数据。
创建一个javascript类，在浏览器端保存数据。要将数据传递给rails，可以使用JSON.stringify(object)并在ajax调用中传递它。并使用JSON。在ruby端解析以获取hashmap形式的数据
当将数据从ruby传递到javascript时，请确保您创建了在javascript端创建的类的对象，并手动将值加载到该对象中。
我不知道宝石。
相关文章：
- 将函数的上下文应用于javascript变量
- 无法导出函数expressjs/requestjs中的变量
- 函数参数中的数据与指定变量之间的任何性能差异
- 将PHP变量传递给jQuery时遇到问题
- 如何通过ajax刷新JSF填充的javascript变量
- 参数变量出现ngTable指令问题
- 通过javascript重定向html传递php变量
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection）
- 全局变量和全局对象的属性之间有什么区别吗
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 值对象在某个变量发生更改后发生更改
- Javascript变量赋值|
- AngularJS-在JSON选择器中使用变量名
- Javascript计数器变量未显示正确的值
- delete关键字在全局变量上的不同行为
- 如何在php变量中嵌入JQuery代码
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 如何在Javascript中的全局变量递增时递减，反之亦然
- 有没有办法将变量从javascript导入到sass，反之亦然
- 在rails中访问js变量/值，反之亦然
