1

我一直在审查我的代码试图整理它，当它需要从页面复制 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 元素以使代码更简洁？

4

2 回答 2

2

你的方法太疯狂了...

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 请求返回一个运行该确切代码的视图（如果您使用的是 MVC 框架）。将代码放在一个地方，一个局部视图或其他地方，并创建一个指向您可以 AJAX 的链接。我的 0.02 美元。

于 2013-01-11T01:09:30.170 回答
1

您应该使用服务器端模板 -> 客户端模板。这种方法很简单，在大多数情况下，您只需在维护中修改服务器端模板。

步骤 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. 将其输出到客户端模板的页面上（使用特定的客户端语法来处理您的客户端选择，即 Moustache）

<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>
于 2013-01-11T01:34:16.430 回答