如何在html中附加ruby标签？

Question

我想在js函数中执行以下操作：

var ul = $('#teams_div');
var html = '<ul class="dropdown-menu" id="teams_ul"><% Team.where(["champeonship_id >='+ id+'"]).each do |team| %><li><a><%= team.name %></a></li><%end%></ul>';
ul.append(html);

问题在于注入var html时

<% Team.where(["champeonship_id >='+ id+'"]).each do |team| %>

和

<%end%>

作为字符串插入（＆＃34;＆lt;％Team.where（[＆＃34; champeonship_id＆gt; =＆＃39; + id +＆＃39;＆＃34;]）。每个团队|％＆gt;＆＃34;）因此未评估。 但是

<li><a><%= team.name %></a></li>

正确注入

可能会发生什么？

由于

Answer 1

＆lt;％= team.name％＆gt;因为它使用＆lt;％=％＆gt;来回应，而＆lt;％Team ...它不是。 （注意＆＃34;＆lt;％＆＃34;而不是＆＃34;＆lt;％=＆＃34;）

尝试：

var ul = $('#teams_div');
var html = '<ul class="dropdown-menu" id="teams_ul">';
<% Team.where(["champeonship_id >='+ id+'"]).each do |team| %>
   html += '<li><a><%= team.name %></a</li>';
<%end%>
html += '</ul>';
ul.append(html);

Answer 2

好的，这里有几个问题

-

<强>的Javascript

首先，您在javascript中调用Ruby代码。

如果这是asset pipeline（IE /app/assets/javascripts/...），它就不会起作用。据我所知，Ruby ERB代码在资产管道中不起作用。

因此，您需要从JS中提取ruby代码，并使用Ajax调用或隐藏div来在您的应用程序中显示它：

#app/assets/javascripts/application.js
$.get( "team_champions/" + id );

这意味着您可以拨打以下电话：

#config/routes.rb
resources :teams do
   collection do
      get "team_champions/:id", to: "team_champions"
   end
end

#app/controllers/teams_controller.rb
Class TeamsController < ApplicationController
   respond_to :js, only: :team_champions
   def team_champions
       @teams = Team.where("champeonship_id >= #{params[:id]}")
       #rails will render app/views/teams/team_champions.js.erb
   end
end

#app/views/teams/team_champions.js.erb
var ul = $('#teams_div');
var html = '<ul class="dropdown-menu" id="teams_ul">';

<% @teams.each do |team| %>
   html += '<li><a><%=j team.name %></a></li>';
<% end %>;

html += '</ul>';
ul.append(html);

我使用了ionut.ciuperca's循环

这将在后台触发，应该适合你。

-

<强> MVC

最后，您想要阅读MVC programming pattern -

直接在您的视图中调用Model是一个很大的问题，而不是＃34}。您需要确保仅从控制器 调用模型数据，从而使应用程序尽可能保持模块化。

上面的代码准确地证明了这一原则。