javascript函数不可见?不会再接到第二次电话

javascript函数不可见?不会再接到第二次电话,javascript,ruby-on-rails-4,backbone.js,raphael,Javascript,Ruby On Rails 4,Backbone.js,Raphael,这可能是一个相当新的问题,所以请容忍我。我正在对RubyonRails4、Javascript和Raphael进行一些修补。我也在用主干线。在我的根页面上,我有两个按钮,一个用Raphael呈现一些东西,另一个在更改相关参数后也应该这样做 在我的application.js中,我得到了以下信息: var app = {}; $(document).ready(function() { app.paper = Raphael("canvas", 1000,700); // canvas: ht

这可能是一个相当新的问题,所以请容忍我。我正在对RubyonRails4、Javascript和Raphael进行一些修补。我也在用主干线。在我的根页面上,我有两个按钮,一个用Raphael呈现一些东西,另一个在更改相关参数后也应该这样做

在我的
application.js
中,我得到了以下信息:

var app = {};
$(document).ready(function() {
  app.paper = Raphael("canvas", 1000,700); // canvas: html div
  ...
  app.Room = Backbone.Model.extend({
    ...
  }
  app.RoomList = Backbone.Collection.extend({
    model: app.Room
  });
  ...
  app.drawRoom = function(room, x, y, z) {
    ...
  }
  ...
});
// retrieve data, stuff it into app.roomList, then this:
app.drawRoom(app.roomList.first(), 500, 300, 0);
app.paper.clear();
app.drawRoom(app.roomList.first(), 800, 300, 1);
单击第一个按钮后,将弹出一个
.js.erb
视图并调用以下内容:

var app = {};
$(document).ready(function() {
  app.paper = Raphael("canvas", 1000,700); // canvas: html div
  ...
  app.Room = Backbone.Model.extend({
    ...
  }
  app.RoomList = Backbone.Collection.extend({
    model: app.Room
  });
  ...
  app.drawRoom = function(room, x, y, z) {
    ...
  }
  ...
});
// retrieve data, stuff it into app.roomList, then this:
app.drawRoom(app.roomList.first(), 500, 300, 0);
app.paper.clear();
app.drawRoom(app.roomList.first(), 800, 300, 1);
这就像预期的那样工作,并渲染一些圆和东西。幕后还有更多的东西(rooms数据通过RabbitMQ作为json从另一个项目的CDO服务器检索,但这完全无关)。现在,当我单击第二个按钮时,我正在执行以下操作:

var app = {};
$(document).ready(function() {
  app.paper = Raphael("canvas", 1000,700); // canvas: html div
  ...
  app.Room = Backbone.Model.extend({
    ...
  }
  app.RoomList = Backbone.Collection.extend({
    model: app.Room
  });
  ...
  app.drawRoom = function(room, x, y, z) {
    ...
  }
  ...
});
// retrieve data, stuff it into app.roomList, then this:
app.drawRoom(app.roomList.first(), 500, 300, 0);
app.paper.clear();
app.drawRoom(app.roomList.first(), 800, 300, 1);
如您所见,我的目的是清理画布,并使用不同的参数重新绘制所有内容。新参数正常,我已经检查了在按下第二个按钮时以下各项是否有效,除了一个孤独的圆圈外,画布保持干净:

app.paper.clear();
app.paper.circle(222, 333, 15);
所以我很确定这一定与我对javascript的无知有关。我还确信对
app.drawRoom()
的第二次调用没有执行,我用Firebug对其进行了测试。也许是能见度问题?提前谢谢!!编辑:按钮的HTML:

= form_tag( show_rooms_url, remote: true) do
  = submit_tag "show rooms"
= form_tag( up_level_url, remote: true) do
  = submit_tag "+1"
它们与
routes.rb
链接到两个单独控制器的方法:

def show_rooms
    conn = Bunny.new(:automatically_recover => false)
    conn.start

    ch = conn.create_channel

    client   = ApplicationHelper::RPCClient.new(ch, "rpc_queue")
    response = client.call("list_rooms")
    ch.close
    conn.close
    respond_to do |format|
        format.js { render partial: "show_rooms", locals: { response: response } }
    end
end

def up_level
    respond_to do |format|
        format.js { render partial: "up_level" }
    end
end
然后视图包含以下调用(相同,实际上,只是不同的参数):

为按钮生成的HTML为:

<form method="post" data-remote="true" accept-charset="UTF-8" action="http://localhost:3000/show_rooms">
  <input type="hidden" value="✓" name="utf8">
  <input type="submit" value="show rooms" name="commit">

由于主干模型上的
draw
变量已设置为true,因此第二次尝试绘制任何内容都失败。如果特定属性为true,则以下代码指定要绘制的

if (room.get('drawn') == false) {
    room.set('drawn', true);

    // your room drawing code is here

}
如果希望保留布尔绘制标志,请将If语句全部放在方法的开头,如下所示:

if (room.get('drawn') == false) {
    room.set('drawn', true);
}

// your room drawing code should be here
为了清楚起见,整个
客厅
方法可能如下所示:

app.drawRoom = function(room, x, y, z) {
    if (room.get('drawn') == false) {
        room.set('drawn', true);
    }
    if (app.level === z) {
        c = app.paper.circle(x, y, 15);
        c.attr("fill", "red");
    }
    if (room.get('n') !== "") {
        if (app.level === z) {
            app.paper.path(['M', x - 10, y - 10, 'Q', x - 20, y - 25, x - 10, y - 40]);
        }
        app.drawRoom(app.roomList.where({ id: room.get('n') })[0], x, y - 50, z);
    }
    if (room.get('e') !== "") {
        if (app.level === z) {
            app.paper.path(['M', x + 10, y - 10, 'Q', x + 25, y - 20, x + 40, y - 10]);
        }
        app.drawRoom(app.roomList.where({ id: room.get('e') })[0], x + 50, y, z);
    }
    if (room.get('s') !== "") {
        if (app.level === z) {
            app.paper.path(['M', x + 10, y + 10, 'Q', x + 20, y + 25, x + 10, y + 40]);
        }
        app.drawRoom(app.roomList.where({ id: room.get('s') })[0], x, y + 50, z);
    }
    if (room.get('w') !== "") {
        if (app.level === z) {
            app.paper.path(['M', x - 10, y + 10, 'Q', x - 25, y + 20, x - 40, y + 10]);
        }
        app.drawRoom(app.roomList.where({ id: room.get('w') })[0], x - 50, y, z);

    }
    if (room.get('u') !== "") {
        app.drawRoom(app.roomList.where({ id: room.get('u') })[0], x, y, z + 1);
    }
    if (room.get('d') !== "") {
        app.drawRoom(app.roomList.where({ id: room.get('d') })[0], x, y, z - 1);
    }
}
此外,您是否尝试过用以下方法清除画布:

app.paper.clearRect( 0, 0, app.paper.width, app.paper.height )

我发现这是最有效的方法。

请发布从Rabbitmq检索数据的JS代码绝对不相关。忘了我提到的关于RabbitMQ的任何事情吧-数据会神奇地出现在那里(:你能在你的UI代码中获取RabbitMQ数据吗?是的。RabbitMQ检索数据,我将其显示在画布上。我再也不会调用RabbitMQ了。数据仍然存在(填充到主干模型/集合中),我唯一的问题是app.drawRoom()函数没有使用不同的参数进行第二次调用。抱歉,这不是rabbitmq问题。