All geek questions in one place

Javascript templating without RJS, with JSON

One of the most convenient things in RJS is its ability to display partial, so that you have all your view code in one place:

# task/index.html.erb <ul id="task_list"> <%= render :partial => 'task', :collection => @tasks %> </ul> # task/_task.html.erb <li> <% if task.is_completed %> <%= task.name %> - <%= task.completed_date %> <% else %> <%= task.name %> - UNCOMPLETED <% end %> ... </li>

Now I'm trying to get away from RJS and respond with a server in a small, well-formatted JSON instead of a huge chunk of JS + HTML.

Is there a way to save my incomplete file and code without duplication and be able to add new items to the task list via JS without using RJS? I reviewed some of the javascript templates, but all require me to support a separate ruby ​​snippet and a javacript template.

+4
source share
4 answers

jQuery 1.4.3 will include the tmpl plugin (directly integrated into jQuery) See http://api.jquery.com/jquery.tmpl/

 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script> </head> <body> <ul id="movieList"></ul> <script> var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>"; /* Compile the markup as a named template */ $.template( "movieTemplate", markup ); /* Render the template with the movies data and insert the rendered HTML under the "movieList" element */ $.tmpl( "movieTemplate", movies ) .appendTo( "#movieList" ); </script> </body> </html>
+8
source

Mustache (http://mustache.github.com/) is a simple simple template language without any logical solutions. It has implementations in both Javascript and Ruby, so templates can be displayed in any environment.

A little harder to use than RJS (or similar template languages). Since templates do not have logic, JSON objects must be extended with functions to provide more complex behavior.

Here is a markup example:

 <div id="person_image"><img src="{{avatar_url}}"></img></div> <div class="info"> <div id="person_location">{{location}}</div> <h2 class="name">{{name}}</h2> <div id="person_positions"> <ul class="positions"> {{#positions}} <li>{{company_name}} — {{title}}</li> {{/positions}} </ul> </div> <div id="person_social_links"> <div class="social-profiles research-links"> {{#links}} <a href="{{url}}" class="branded" target="_blank" style="background-image:url(https://www.google.com/s2/favicons?domain={{name}})"></a> {{/links}} </div> </div> </div>

What this object will display:

 { "id":"4c0578d940cfd305ff00011c", "name":"Steve Someguy", "location":"Austin, Texas, United States", "positions":[ {"title":"CEO", "company_name":"ACME, Inc.", "company_id":null}, {"title":"Director", "company_name":"Capsasin, Inc.", "company_id":"4c0578d940cfd305ff00011c"} ], "links":[ {"name":"twitter.com","url":"http://twitter.com/spicyjs","image_url":"http://a3.twimg.com/profile_images/439463427/Picture_7_bigger.png"}, {"name":"twitter.com","url":"http://twitter.com/shadr","image_url":"http://a1.twimg.com/profile_images/20072132/me.jpg"}, {"name":"facebook.com","url":"http://facebook.com/shad.reynolds","image_url":"http://www.facebook.com/profile/pic.php?uid=AAAAAQAQm2JvEZLOpW8bCG-rToD8VQAAAAlFjZG9cIKwaX2wuA_Nspjn"} ] }

Handlebars.js is a related project that also gets some traction, although the Ruby implementation does not seem complete (http://yehudakatz.com/2010/09/09/announcing-handlebars-js/).

0
source

What you are looking for may be JsonML or Pure , I found this a long time ago at the bottom of JSON.org , but I did not come to test them myself.

If you use them, let me know how this happens.

I wish you good luck!

0
source

For a library-independent solution, you can take a look at the Jon Resig (jQuery creator) microtemperature feature on your blog:

http://ejohn.org/blog/javascript-micro-templating/

Not the best implementation, but worth a read.

0
source

Source: https://habr.com/ru/post/1312144/

More articles:


All Articles