Есть ли система шаблонов Javascript, которая обертывает HTML?

Интересно, есть ли что-то вроде системы шаблонов Javascript, которая обертывает HTML, так что нам не нужно иметь дело с HTML напрямую (да, я знаю, что это плохая идея, но просто из любопытства).Есть ли система шаблонов Javascript, которая обертывает HTML?

Таким образом, вместо написания HTML:

<body> 
    <div id="title">Great work!</div> 
    <span>My name is Peter</span> 
</body>

Мы пишем в Json:

body: [ 
    {div: [ 
    {id: "title"}, 
    {body: "Great work!"} 
    ] 
    {span: [ 
    {body: "My name is Peter"} 
    ] 
]

Я знаю, это выглядит любопытное странно, но я действительно люблю вещь, что все является объектом :)

Есть ли такая реализация для любого языка? (Я сам использую Ruby).

EDIT: Нашел кое-что интересное:

http://jsonml.org/

Посмотрите на их примерах! Brilliant!

источник

2010-08-29 never_had_a_name

Но строка является объектом ... – Crozin

Просто искать вокруг вопросов, которые ищут способы создания веб-сайтов с Javascript в одиночку , Кажется, они появляются довольно часто. –

Возможный дубликат [HTML-шаблонов в Javascript? Без кодирования на странице?] (Http://stackoverflow.com/questions/3585573/html-templates-in-javascript-without-coding-in-the-page) –

Я только что написал небольшой пример синтаксического анализатора, аналогичный упомянутому вами, используя простой старый JavaScript. Мой код немного грязный (как упоминалось Кейси Хоуп, вы не должны распространять Object.prototype), возможно, но это работает и очень легко понять, я надеюсь.

Сама функция:

Object.prototype.toHtml = function(options) 
{ 
    //Iterates over elements 
    var processElements = function(obj, handler) 
    { 
     //Stores found elements 
     var elements = []; 

     for (var elem in obj) 
     { 
      //Skips all 'derived' properties 
      if (!obj.hasOwnProperty(elem)) continue; 

      //Attribute 
      if (elem.indexOf("_") == 0) 
      { 
       elements.push({type: "attribute", name : /^_([a-z][0-9a-z]+)$/i(elem)[1], value : obj[elem]}); 
      } 
      //Internal contents 
      else if (elem == "contents") 
      { 
       elements.push({type: "contents", value : obj[elem]}); 
      } 
      //Text node 
      else if (elem == "text") 
      { 
       elements.push({type: "text", value : obj[elem]}); 
      } 
      //Ordinary element 
      else 
      { 
       elements.push({type: "element", name : elem, value : obj[elem]}); 
      } 
     } 

     //Returns parsed elements 
     return elements; 
    } 

    //Internal function to deal with elements 
    var toHtmlInternal = function(name, elements) 
    { 
     //Creates a new element by name using DOM 
     var element = document.createElement(name); 

     //Element children and attributes 
     var children = processElements(elements); 

     for (var i = 0; i < children.length; i++) 
     { 
      switch (children[i]["type"]) 
      { 
       case "element": 
        element.appendChild(toHtmlInternal(children[i]["name"], children[i]["value"])); 
        break; 
       case "attribute": 
        element.setAttribute(children[i]["name"], children[i]["value"]); 
        break; 
       case "text": 
        element.appendChild(document.createTextNode(children[i]["value"])); 
        break; 
       case "contents": 
        for (var j = 0; j < children[i]["value"].length; j++) 
        { 
         var content = children[i]["value"][j]; 
         if (typeof content == "string") 
         { 
          element.appendChild(document.createTextNode(content)); 
         } 
         else if (typeof content == "object") 
         { 
          element.appendChild(content.toHtml().firstChild); 
         } 
        } 
        break; 
      } 
     } 

     //Returns it 
     return element; 
    } 

    //Initial element checkment 
    var initial = processElements(this); 
    //Generic wrapper 
    var wrapper = document.createElement("div"); 

    for (var i = 0; i < initial.length; i++) 
    { 
     if (initial[i]["type"] == "element") 
     { 
      wrapper.appendChild(toHtmlInternal(initial[i]["name"], initial[i]["value"])); 
     } 
    } 

    //Returns wrapper 
    return wrapper; 
};

Как использовать:

//A simple testing template 
var html = ({ 
    //Element name is just a plain name here 
    body: { 

     //Nested element 
     div : { 
     //All attributes are prepended with underscore 
     _id : "title", 
     //Content of the element is represented by such construction 
     text : "Great work!" 
     }, 

     span : { 
     text : "My name is Peter" 
     }, 

     h1 : { 
     _class : "common", 
     //Elements can be defined using 'contents' notation also, so we could include text nodes 
     contents : ["This is my ", {a : {text: "beautiful"}} , " header"] 
     } 

    } 
}).toHtml(); 

alert(html.innerHTML);

источник

2010-08-29 05:49:18

Расширение 'Object.prototype' - очень плохая идея, потому что она прерывает« for-in »петли. –

Я знаю. Код является просто выражением общей идеи (как может выглядеть такой парсер). Этот код можно легко переписать, чтобы избежать ошибок в будущем. –

Проводится ли он на GitHub? –

Вы также должны посетить haml. Это довольно круто! Это не JSON, а его логическое обоснование. Вам не нужно иметь дело с HTML.

источник

2010-08-29 04:22:25 naikus

Это не одно и то же. Это похоже на запись HTML, но вам не нужно быть таким явным (без конечного тега и т. Д.). Но я имею в виду просто использовать json для него вместо xml. –

Есть ли система шаблонов Javascript, которая обертывает HTML?

ответ

Смежные вопросы