0

我是一个非常直观的程序员/设计师，我为我的项目开发了一个迷你框架，用于显示来自 PHP 输出的数据。

基本上，我使用我的 IDE Dreamweaver 设计我的页面并指定要循环和显示的块div。li我只是使用 Javascript 对目标div/li元素执行字符串替换例程来生成内容。我想你可以说我的设计在视觉上就是模板本身。进行更改要容易得多：之前，我会设计它，然后复制并粘贴要循环到 PHP 中的块的 HTML 代码，然后我在那里进行值填充。

所以基本上我的 PHP 脚本会输出一个对象，而我的 Javascript 函数会发挥作用并根据需要生成（附加到元素）..

在我开始处理大量表数据（大约 2000 行）之前，这一直很有效。我注意到浏览器在尝试生成内容时暂停了一段时间，这是在桌面上 - 我可以想象当我的页面在移动设备上运行时它会慢多少。

这让我开始思考，我是否应该回到后端生成内容并在 JS/浏览器端做一个简单的输出？我已经喜欢在 JS 中处理数据行了，将所有模板代码原样保留在页面上，并让 Javascript 将其拾取并使用它来生成内容，在视觉上更加方便。我讨厌回到让 PHP 生成实际的 html 代码。

在这种情况下你会推荐什么？

PS：对于那些想建议减少数据限制显示的人：在这种情况下我不能。我必须显示所有返回的行而没有分页。我有我的理由/要求。

4

1 回答 1

1

underscore.js 的简单实现

<table class="outer">
<thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
</tbody>


<div class="outer">

<div class="th">Id</div>
<div class="th">Name</div>

<p>&nbsp;</p>
</div>
<script type="text/html" id='table-data'>

<% _.each(items,function(item,key,list){ %>
    <tr>
        <td><%= key %></td>
        <td><%= item.name %></td>
    </tr>
<% }) %></script>
<script type="text/html" id='div-data'>

<% _.each(items,function(item,key,list){ %>
    <div><%= key %></div>
    <div><%= item.name %></div>
<% }) %></script>

获取数据并填充

var items = [
{name:"Nick"},
{name:"Lee"},
{name:"Jenny"},
{name:"Julie"},
{name:"Dennis"},
{name:"Shawn"},
{name:"Justin"},
{name:"Scott"},
{name:"John"},
{name:"Sherell"},
{name:"Janie"},
{name:"Graham"},
{name:"Erica"}]

var tableTemplate = $("#table-data").html(),
divTemplate = $("#div-data").html();
$("table.outer tbody").html(_.template(tableTemplate,{items:items}));
$("div.outer p").before(_.template(divTemplate,{items:items}));
于 2013-04-27T10:12:57.873 回答