是否有一個包含HTML的Javascript模板系統？

我不知道是否有類似於包裝HTML的Javascript模板系統，所以我們不必直接處理HTML（是的，我知道這是一個壞主意，但出於好奇）。是否有一個包含HTML的Javascript模板系統？

因此，而不是寫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）。

編輯：發現一些有趣的事情：

http://jsonml.org/

看看他們的榜樣！輝煌！

來源

2010-08-29 never_had_a_name

但字符串是一個對象... – Crozin 2010-08-29 04:22:38

只需搜索周圍的是想方設法單獨使用JavaScript建立網站問題。這些似乎經常出現。 – 2010-08-29 04:23:39

[HTML中的HTML模板可能重複？沒有編碼在頁面？]（http://stackoverflow.com/questions/3585573/html-templates-in-javascript-without-coding-in-the-page） – 2010-08-29 05:51:37

我剛剛寫了一個解析器的小例子，類似於您提到的，使用普通的舊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循環。 – 2010-08-29 05:55:18

我知道。代碼只是一般想法的表達方式（這種解析器的外觀如何）。此代碼可以輕鬆重寫以避免將來的錯誤。 – 2010-08-29 06:06:22

它在GitHub上託管嗎？ – 2010-08-29 12:48:03

您還應該查看haml。它非常酷！它不是JSON，但其基本原理是一樣的。你不必處理HTML。

來源

2010-08-29 04:22:25 naikus

這不是一回事。這就像編寫HTML一樣，但你不必像顯式那樣（沒有結束標籤等）。但我的意思是隻使用json而不是xml。 – 2010-08-29 04:26:31

是否有一個包含HTML的Javascript模板系統？

回答

相關問題