Ruby on Rails / Javascript小部件

Question

因此，这就是我的观点，我尝试遵循一些教程并最终从http://8raystech.com/2011/11/28/how-to-create-embeddable-widgets-with-rails阅读所有参考资料

我花了将近2天的时间来寻找我显然在某个地方犯的小错误，因为我是刚接触红宝石的人。 我认为这可能是路线错误，因为当我通过Chrome检查元素时，我看到以下错误： 编辑：

"GET http://localhost:3000/widget 500 (Internal Server Error)"

我拼命地尝试了很多事情，但这是我当前的代码：

我的窗口小部件控制器如下所示：（widget_controller.rb）

class WidgetController < ApplicationController
    def show
        @content = render_to_string(:partial => 'widget/embed', :layout => false)
    end
end

我使用JavaScript的视图（show.erb.html）

(function() {
    document.write(<%= @content.to_json %>)
})()

我认为部分内容并不是很重要，但这是一个示例：（_embed.erb.html）

<style>...</style>
<div class="widget-communication">
    <div>Bla bla bla</div>
    ...
</div>

最后，在routes.rb

...
match 'widget', to: 'widget#show'
...

所以我在本地进行了测试以使用以下方式加载我的小部件：

<script src="http://localhost:3000/widget" type="text/javascript"></script>

Answer 1

我不知道该小部件，但您似乎仍想将部分显示为HTML，而不是JS。 您只是将一个字符串分配给值内容，它想使用默认的渲染操作。 尝试不使用.erb而是使用.js文件扩展名（show.js.erb），因此：

在控制器中，您仍然需要返回一个集合，即：

class WidgetController < ApplicationController
  respond_to :js, only: :show

  def show
    @user = User.find params[:id]
  end
end

并在视图（show.js.html）中：

document.write("<%= escape_javascript(render(:partial => 'widget/embed', :locals => {:user => @user})).html_safe) %>");

虽然我不建议使用respond_to :js 。 它很难调试，速度很慢，并且混合了html和js逻辑。

Answer 2

好的，这是另一种实现方法... JQuery和Json ....

因此，请使用直接使用的控制器（如用户控制器）或要在窗口小部件中放入的任何信息（在我的示例中为公司的一些信息）。

因此，在您的控制器中添加一个方法小部件，例如：

def widget
    @company = Company.find(params[:id])
    @logo_url = @company.logo_url(:mini)
    respond_to do |format|
      format.json { render :json => {:company => @company, :url => @logo_url}, :callback => params[:jsoncallback] }
    end
  end

在routes.rb中，您应该具有以下类似内容：

resources :public_company_profiles do
    get :widget, on: :member
  end

然后JQuery部分将使用第三方网站的JSON信息生成html代码，首先使用脚本添加jquery，然后添加实际的jquery请求。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$.getJSON("http://www.yourwebsite.com/yourcontroller/ID/widget?jsoncallback=?",
    function(data) {   
    var logo_url = "http://www.yourwebsite.com" + data.url;
    $("#logo img").attr('src',logo_url);
    $("#logo img").attr('alt',data.company.name);
    $("#name").html(data.company.name);
    $("#desc").html(data.company.description);
  });
</script>

然后，宝贝！ （不要忘记在jQuery文档中放一些东西：api.jquery.com/html）

Answer 3

为什么要使用render_to_string？ 您是否尝试过普通渲染？

另外，也许尝试使您的GET调用将.json附加到URL的末尾。