0

我正在让用户触发（jquery click）ajax调用来加载额外的数据来填充网页，构建html的正确方法是什么：我应该在rails控制器中生成html并只返回html数据，还是应该返回JSON并在ajax函数中构建它？还是有一些更好的方法可以在 Rails 中进行 ajax 调用？

下面是目前的 countries.html.haml 代码（控制器中生成的 html 数据）：

$('#tab li').click( function(){
  $('#tab li').removeClass('active');
  $(this).addClass('active');

  var first_l = $(this).attr("id")

  $.ajax({
    url: "/countries/get_flags",
    type: "GET",
    data: {first_letter: first_l},
    complete: function() {
      // called when complete
    },
    success: function(data) {
      // called when succesful
      $('#countries_container').html("");
      $('#countries_container').append(data);
    },
    error: function(xhr,status,error) {
      // called when error
    }
  });
});

和控制器：

def get_flags

  @html = ""
  @fetched_countries = Country.all( :conditions => "name like '#{params[:first_letter]}%'")
  i = 1
  @html = "<div class='row country-row'>"
  @fetched_countries.each do |country|
    if i % 5 == 0
      @html += "<div class='row country-row'>"
      i = 1
    end

    @html += "<div class='span3 '>"
    @html += "<div class='country-name'>#{country.name}</div>"
    @html += "<div class='country-image thumbnail'><img  alt='#{country.id.to_s}' src='/assets/countries/x100/#{country.id.to_s}.png' /></div></div>"
    if i % 4 == 0
      @html += "</div>"
    end
    i = i + 1

  end
  render :text => @html

end
4

1 回答 1

0

首先，最自然的放置复杂 HTML 生成代码的地方是 Helper。通常在视图代码中使用助手。它们通过辅助方法包含在视图代码中。但是如果您发现需要在控制器中生成 HTML 代码，您可以使用帮助代码并将 HTML 从控制器返回给浏览器。

为了直接回答这个问题，我建议在您的控制器中生成 HTML，而不是尝试在浏览器中使用 JavaScript 来构建它。当您使用 Rails 和 Javascript 时，rails 是一个比浏览器中的 JavaScript 更健壮的环境，将尽可能多的开发工作集中在更全面的环境中才有意义。

作为奖励答案，如果您发现自己在帮助程序中构建了大量复杂的 HTML 代码，您可能需要查看 Builder::XmlMarkup，特别是如果您来自 C/C++ 背景。Builder::XmlMarkup 允许您以对 C 程序员来说非常直观的方式创建 HTML。即使您不是来自 C/C++，Builder::XmlMarkup 也会生成非常易读的代码，例如：

require 'active_support/builder' unless defined?(Builder)  

def an_html_generator_method(somestuff)
  xm = Builder::XmlMarkup.new
  xm.div(:class=>'mydiv') {
    xm.ul(:id=>'aMenu') {
      somestuff.each do |i|
        xm.li { xm << i.whatever }
      end
    }
  }
end
于 2012-04-22T20:33:07.017 回答