Question

我一直在审查我的代码，试图整理它，我只是厌倦了当我需要从页面复制html时编写jQuery的方式。这就是我的意思：

我有一个页面的一部分循环通过像论坛这样的帖子（我的实际代码更重html）：

<? foreach ($posts as $post): ?>
    <div class="post">
        <div class"post_details">
            <a href="<?= $post->link ?>"><?= $post->title ?></a>
            <br>
            <?= $post->timestamp ?>
        </div>
    </div>
<? endforeach ?>

然后在我的jquery中，我基本上必须复制这个HTML来循环遍历AJAX请求的结果以获取更多近期帖子：

for (i = 0; i < response.length; i++) {
    post = respnse[i];

    html = '<div class="post">';
        html += '<div class"post_details">';
            html += '<a href="' + post.link + '">' + post.title + '</a>';
            html += '<br>';
            html += post.timestamp;
        html += '</div>';
    html += '</div>';
}
// Inject html into page

$(".feed").prepend(html);

如果我改变PHP循环遍历对象的HTML布局，那么我还必须更改jQuery中的HTML。然后我最终得到了许多基本上重复的代码，这些代码就像任何东西一样变得混乱。

有没有办法更好地将jQuery链接到HTML元素以使代码更简洁？

Answer 1

你的方法很疯狂......

html = '<div class="post">';
    html += '<div class"post_details">';
        html += '<a href="' + post.link + '">' + post.title + '</a>';
        html += '<br>';
        html += post.timestamp;
    html += '</div>';
html += '</div>';

为什么用JavaScript？为什么不让PHP返回完全格式化的字符串，然后只使用jQuery将其放入其位置？只需在xml字符串中返回它并将其解压缩。

更好的是，让AJAX请求返回运行该确切代码的View（如果您使用的是MVC框架）。将代码放在一个地方，部分视图或其他东西，并创建一个指向AJAX的链接。我的0.02美元。

Answer 2

您应该使用服务器端模板 - ＆gt;客户端模板。该方法很简单，导致您在大多数情况下仅修改维护中的服务器端模板。

步骤1.定义服务器端功能或块

<?php
 function postTemplate($post) { ?>
 <div class="post">
    <div class"post_details">
        <a href="<?= $post->link ?>"><?= $post->title ?></a>
        <br>
        <?= $post->timestamp ?>
    </div>
 </div>
<? } ?>

步骤2.将其输出到页面以进行客户端模板化（使用特定的客户端语法，无论客户端选择什么，即Mustache）

<script type="html/template" id="postTemplate">
<?php
  $obj = new stdClass;
  $obj->link = "{link}";
  $obj->title = "{title}";
  $obj->timestamp = "{timestamp}";
  echo postTemplate($obj);
 ?>
 </script>

步骤3.使用您最喜欢的客户端模板策略

<script>
    // refer to http://mustache.github.com/
    // but I prefer EJS myself
</script>

凌乱的Jquery + HTML + PHP

2 个答案: