Question

我正在搜索从JSON数据文件开始呈现HTML模板的内容。

问题是我搜索的插件/框架/库必须创建<html>模板结构，从非常简单的东西开始。

例如，我有一个像这样的简单html：

<ul>
  <li><li>
</ul>

和这样的json：

{
   "mylist":{
      "listone": 
          {"img" : "/img/pippo.gif" ,
           "text1" : "pluto",
           "text2" : "topolino",
           "link" : "http://www.sito.it"        
           },
      "listtwo":
          {"img" : "/img/pippo.gif" ,
           "text1" : "pluto",
           "text2" : "topolino",
           "link" : "http://www.sito.it"        
          }
   }
}

我希望数据在我的文档中呈现如下：

<ul>
  <li>
    <img src="/img/pippo.gif" />
    <h1>pluto</h1>
    <p><a href="http:://www.sito.it>topolino</a></p>
  </li>
</ul>

如果我已经完成整个结构，我可以像往常一样使用pure.js，但是，由于我没有li中的内部标记，我可以将HTML代码注入pure.js指令？或者只能使用JsRender或类似的？

Answer 1

Pure JS允许您使用directives的JavaScript函数。无论从该函数返回什么，都将用作指令的值。

该函数的参数是具有以下内容的对象   属性：


上下文：这是为转换传递的完整JSON

item * ：当前循环项目

项目* ：循环的所有项目

pos * ：循环中的当前位置。迭代数组时的整数，迭代集合的属性名称

以下示例说明了如何执行此操作。

var data = {
  "img": "/img/pippo.gif",
    "text1": "pluto",
    "text2": "topolino",
    "link": "http://www.sito.it"
}

var directive = {
  'li': function (arg) {
    return "<img src=\""+arg.context.img+"\" /><h1>"
      +arg.context.text1+"</h1><p><a href=\""
      +arg.context.link+"\">"+arg.context.text2+"</a></p>"
  }
}

$('ul').render(data, directive);

给定的HTML：

<ul><li></li></ul>

将变为以下（渲染后）：

<ul>
  <li>
    <img src="/img/pippo.gif">
    <h1>pluto</h1>
    <p>
      <a href="http://www.sito.it">topolino</a>
    </p>
  </li>
</ul>

我希望这会有所帮助。

Answer 2

这比回答更有建议。我会反对你想要完成的事情。用于模板化的强大概念是将HTML与代码分开。当你保持这种分离时，你可以弄清楚如何编写代码并理解遵循这种分离的代码。然后代码将更容易编写和理解，不仅由您，而且由遵循相同原则的其他人。

在您的示例中，您的HTML模板应如下所示：

<ul>
  <li>
    <img src="/img/pappo.gif" />
    <h1>marte</h1>
    <p><a href="http:://www.sito.it>guille</a></p>
  </li>
</ul>

和这样的json：

{
   "mylist":{
      "listone": 
          {"img" : "/img/pippo1.gif" ,
           "text1" : "pluto1",
           "text2" : "topolino1",
           "link" : "http://www.sito1.it"       
           },
      "listtwo":
          {"img" : "/img/pippo2.gif" ,
           "text1" : "pluto2",
           "text2" : "topolino2",
           "link" : "http://www.sito2.it"       
          }
   }
}

，决赛应该是这样的：

<ul>
  <li>
    <img src="/img/pippo1.gif" />
    <h1>pluto1</h1>
    <p><a href="http:://www.sito1.it>topolino1</a></p>
  </li>
  <li>
    <img src="/img/pippo2.gif" />
    <h1>pluto2</h1>
    <p><a href="http:://www.sito2.it>topolino2</a></p>
  </li>
</ul>

我能解释如何实现这一目标的最简单方法是使您的JSON数据结构几乎一对一地跟随您的HTML。最大的区别在于，一旦完成，模板将易于编写，编程JSON转换最终将比编写HTML转换更容易。此外，您的HTML模板将由浏览器100％呈现，非程序员可100％修改。这里的关键是尽管您的最终产品是HTML，但采用JSON对象路由将产生更好的代码。它不会消除创建JSON的实际问题，您需要调整，学习和找到这样做的工具。

Answer 3

当然有可能。搜索'javascript DOM createElement'，你会发现很多例子（包括遍布stackoverflow）。

是否可以使用pure.js插入新的HTML

3 个答案: