Ruby on Rails / JavaScript小部件

Question

Ruby on Rails / JavaScript小部件

javascriptjqueryjsonwidgetruby-on-rails-3.2

3

这是我的观点，我尝试遵循一些教程并最终从http://8raystech.com/2011/11/28/how-to-create-embeddable-widgets-with-rails阅读了所有的参考资料。由于我对ruby on 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>

- kulssaka

如果您尝试通过浏览器打开http://localhost:3000/widget会发生什么？ - Gabber

模板丢失缺少模板widget/show，application/show，使用{:locale=>[:fr], :formats=>[:html], :handlers=>[:erb, :builder, :coffee, :haml]}。搜索路径为：*“/Users/....../rails/application/app/views” *“/Users/....../.rvm/gems/ruby-1.9.3-p194@rails3/gems/devise_invitable-1.1.0/app/views” *“/Users/....../.rvm/gems/ruby-1.9.3-p194@rails3/gems/devise-2.1.2/app/views”。 - kulssaka

https://dev59.com/OGw15IYBdhLWcg3wntKh - Gabber

我会关注并保持联系，谢谢。 - kulssaka

我认为问题不在那里，因为我没有重定向到任何地方，也没有创建方法。同样的结果缺少模板，但问题应该在其他地方。:'( - kulssaka

3个回答

2

好的，这里有另一种方法...使用JQuery和Json...

所以直接使用一个控制器，比如你的用户控制器或者任何你想放在小部件中的信息，在我的例子中是一些公司信息。

所以在你的控制器中添加一个名为widget的方法，像这样：

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文档的<code>和其他标记：api.jquery.com/html）

- kulssaka

这是更好的方法，伙计！你可能想要放弃 respond_to 块，只使用 render :json。 - Eru

0

你为什么要使用render_to_string？你尝试过直接使用render吗？

另外，也许可以尝试在GET调用的URL末尾添加.json。

- RonanOD

render_to_string 在此处用于将部分嵌入文本传递给第三方网站中的 JavaScript 渲染。我不太确定您想在哪里添加“ .json”。我尝试将其放在我的 GET 调用中，但没有结果。 <script src="http://localhost:3000/widget.json" type="text/javascript"></script>？无效。 - kulssaka

关于render_to_string，我可以选择不使用它，而是直接在JavaScript中使用document.write进行编写，但我更喜欢将文件分开。我还检查了@content的内容，一切都很好 :) 我为此选择遵循了以下内容： http://aymeric.gaurat.net/2010/how-to-build-your-own-widget-in-ruby-on-rails-in-10-minutes/ - kulssaka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eru · Accepted Answer

我不了解这个小部件，但看起来您仍然希望将局部渲染为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逻辑。