Geek Answers Handbook

How to reduce duplication of views between client and server?

I am working on an AJAXy project (Dojo and Rails, if that matters). There are several places where the user should be able to sort, group and filter the results. There are also places where the user fills out a short form, and the resulting item is added to the list on the same page.

The non-AJAXy implementation works fine - the level-level server already knows how to display this stuff, so it can simply do it again in a different order or with an additional element. This, however, adds a lot of load to the server.

So, we switched to sending JSON from the server and did a lot of (re) rendering on the client side. The downside is that now we have duplicate code for rendering each page: once in Rails, which was created for this, and once in Dojo, which was not there. The latter is just a string concatenation.

So, the first question is: is there a good MVC Javascript structure that we could use to make client-side rendering more convenient?

And the second question: is there a way to generate client-side views in Javascript and server-side views in ERB from the same template? I think pragmatic programmers did it.

Alternatively, the question is part three: am I completely missing the other corner? Maybe send JSON from the server, but also include the HTML snippet as an attribute so that Javascript can do filtering, sorting, etc., and then just paste this snippet?

+3
source share
7 answers

Number 5 on my list of five AJAX styles works very well.

0
source

Well, every time you create HTML snippets on the client and on the server, you can get duplicated code. In general, there is no good way. But you can do two things:

  • . AHAH, HTML- . HTML, innerHTML .
  • (AKA - ). HTML JavaScript HTML. . : <script> JSONP, .

. - .

, , , JavaScript. .

+1

; . :

  • Ajax Rails
  • Rails .
  • Rails HTML, .
  • Javascript HTML.

. Rails, , .

0

- - ? , , .

:

render_table_initially:
  if nojs:
    render big_html_table
  else:
    render empty_table_with_callback_to_load_table


load_table:
  render '{ rows: [
    { foo: "a", bar: "b", renderedHTML: "<tr><td>...</td></tr>" },
    { foo: "c", bar: "d", renderedHTML: "<tr><td>...</td></tr>" },
    ...
  ]}'

:

dojo.xhrGet({
  url: '/load_table',
  handleAs: 'json',
  load: function(response) {
    dojo.global.all_available_data = response;
    dojo.each(response.rows, function(row) {
      insert_row(row.renderedHTML);
    }
  }
});

all_available_data , , .. .

, , . , -...

0

", JSON , HTML , Javascript , .., ?"

.

: http://www.prototypejs.org/api/template

, MVC, PureMVC. http://puremvc.org/content/view/102/181/

0

, , - , , + .

, , , an, , , JSON / , ..

ExtJS - .

0

, , :

,

JavaScript, . , , , . , .

, , .

, , . , ? , , ?

AJAX JSON, , , , .

, . . , - , , , , , .

0

More articles:


All Articles