📜 ⬆️ ⬇️

Client-side templating is already a reality

Prehistory


I am developing an IFrame application for the social network VKontakte. The most convenient way to navigate an application is to dynamically load data, without reloading the entire page. I used to generate html code to be displayed on the server until I met EJS - JavaScript Templates ...

EJS - Embedded JavaScript


EJS turned out to be one of the most convenient and appropriate template engines for me. It works with both single variables and arrays (read objects), there is logic (if ... else ...).

I will show with an example that this template can.

Template - /templates/question.ejs:
<div>
  <% if(question) { %>
   <h2><%= author %>: <%= question %></h2>
   <div><textarea name="answer" id="answer"></textarea></div>
   <ul class="nNav btnList">
     <li>
      <a href="" onclick="ACT.question.answer('index'); return false;"></a>
     </li>
   </ul>
  <% } else { %>
   <h2> , !</h2>
  <% } %>
</div>

* This source code was highlighted with Source Code Highlighter.


— /data/question.php:
{"id":"98","question":"What are you doing now?","author":"Mihalich88"}

* This source code was highlighted with Source Code Highlighter.


:
$.ajax({
  type: "POST",
  url: "/data/question.php",
  dataType: "json",
  data: data,
  success: function(ans){
   var html = new EJS({url: ' /templates/question.ejs'}).render(ans);
  }
});


* This source code was highlighted with Source Code Highlighter.



+ «»
  1. , .. json-,
  2. , ..
  3. MVC , «V»
  4. Opera Mobile 10

— «»
  1. , RIA

, EJS: http://formspring.vk-app.ru
: *.ejs. , *.tpl, — … , , .

')

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


All Articles