2

我正在寻找从 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或类似？

4

3 回答 3

4

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

该函数的参数是一个具有以下属性的对象：

  • context：这是为转换传递的完整 JSON
  • item* : 当前循环项
  • items* : 循环的所有项目
  • 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>

我希望这会有所帮助。

于 2013-01-18T13:24:41.253 回答
1

这比回答更建议。我会建议您反对您要完成的工作。用于模板的强大概念是将 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 的实际问题，您需要调整、学习和找到工具来做到这一点。

于 2013-02-05T17:23:44.477 回答
0

当然有可能。搜索“javascript DOM createElement”，您会发现大量示例（包括整个 stackoverflow）。

于 2012-12-07T14:59:13.643 回答