$ P $在干燥方式对渲染AJAX填充视图 [英] Pre-render AJAX-populated view in a DRY way

问题描述

这是一些在我们的应用Rails的意见通过AJAX填充自己，他们的第一个数据呈现来自上jQuery的 $（的document.ready）运行事件。我们感兴趣的是这种情况的次实质上表明表格数据的列表（例如，一个收件箱，搜索结果等的清单）。

A number of Rails views in our application populate themselves via AJAX, and the first rendering of their data comes from an javascript call that runs on jquery's $(document.ready) event. The views we are interested in for this essentially show a list of tabular data (e.g. an inbox, a list of search results, and so on).

我们要pre-渲染结果的第一页，而无需使AJAX调用，但我们希望能够重新填充视图，而不重新加载整个页面。这并不难，但似乎需要编写的code的应用程序，做同样的事情的不同部分单独位：一旦在视图中绘制初始数据集（从最初的渲染电话），再次在Javascript来提取数据（动态清理掉旧的DOM，并用新鲜的HTML取代它）。新集

We want to pre-render the first page of results without having to make the AJAX call, but we want to be able to re-populate the view without reloading the whole page. This isn't difficult, but it seems to require writing separate bits of code in different parts of the app that do the same thing: once in the view to draw the initial set of data (from the initial render call) and once more in the Javascript to draw new sets of data (dynamically clearing out the old DOM and replacing it with fresh HTML).

目前的JavaScript克隆一个隐藏的（与风格=显示：无）的模板元素（通常是一个 DIV ），设置每个字段的值，并增加了新的元件到DOM。这个效果很好，但如果我们想$ P $使我们在写模板对象的另一个副本在rubyfied ERB块（例如： @ messages.each之前做对填充视图| M | ）。如果模板被改变，那么code在再培训局块必须改变，以匹配。 - 不是很干

Currently the javascript clones a hidden (with style='display: none') template element (usually a div), sets the value of each field, and adds the new element to the DOM. This works well, but if we want to pre-populate the view before rendering we have to write another copy of the template object in a rubyfied ERB block (e.g. @messages.each do |m|). If the template is changed, then the code in the ERB block has to be changed to match -- not very DRY.

有没有更好的办法？如果是这样，那是什么？

Is there a better way? If so, what is it?

感谢

汤姆

推荐答案

在您的文档（准备好），你可以明确地让第一次的AJAX调用是不依赖于事件处理程序。或类似的，你可以明确地触发事件处理程序。

In your document(ready), you can explicity make the first AJAX call that isn't tied to an event handler. Or similarly, you can explicitly trigger the event handler.

未初始化索引视图：

index.html.haml（初始）

index.html.haml (initial)

.span12
  #book-table

现在这里是DRYed起来的部分将被用于填充 DIV＃书表

Now here is the DRYed up partial that will be used to populate div#book-table

_table.html.haml

_table.html.haml

%table
  %tr
    %th Title
    %th Author
  - books.each do |book|
    %tr
      %td= link_to book.title, book_path(book)
      %td= book.author

接下来，您将有JS来响应它。请注意，这是什么做一个AJAX调用索引操作过程中呈现的部分。

Next you'll have JS that responds to it. Note that what this is doing is rendering the partial during an AJAX call to the index action.

index.js.erb的

index.js.erb

$('#book-table').html('<%= escape_javascript(render(partial: "table", locals: { books: @books })) %>');

我们现在需要调整索引视图进行初始化，这样的观点：

We now need to adjust the index view to initialize to this view:

index.html.haml（最终）

index.html.haml (final)

:javascript
  $(document).ready (function() {
    $.get("/books.js");
  });

.span12
  #book-table

正如你所看到的的document.ready进行初始AJAX调用，打你.js.erb和填充DIV没有明确填充DIV的.html.haml

As you can see, the document.ready does an initial AJAX call, hitting your .js.erb and populating the div without explicitly populating the div in the .html.haml

这篇关于$ P $在干燥方式对渲染AJAX填充视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！