凌乱的jquery + HTML + PHP

我一直在审查我的代码，试图整理它，并且当我需要从页面中复制html的时候，我写的jQuery的方式生病了。这里是我的意思是：凌乱的jquery + HTML + PHP

我有过类似的论坛帖子（我的实际代码更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的，我基本上都经过一个AJAX请求，以获得更多最近的职位的结果复制此HTML循环：

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的布局，然后我也有改变HTML中jQuery。然后我得到了许多基本上重复的代码，这些代码就像任何东西一样变得混乱。

有没有更好的链接jQuery的HTML元素，使代码更简洁的方法？

来源

2013-01-11 Sneaksta

的http：// codereview.stackexchange.com/ – j08691

你的方法是疯了...

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。

来源

2013-01-11 01:09:30 hjc1710

这个答案可以帮助你理解这一点。 http://stackoverflow.com/q/14086747/1117773 –

哇，你只是震动了我的世界。我不相信我没有想到这一点。非常感谢！ – Sneaksta

我曾经这样做过，但它绝对取决于你在做什么的规模。如果您使用客户端模板，则比使用jQuery选择器操作更容易，更快速，更简洁。 –

您应该使用服务器端模板 - >客户端模板。该方法非常简单，并且在大多数情况下只会修改维护中的服务器端模板。

步骤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.将其输出到页面上用于客户端模板（使用特定的客户端语法无论你的客户端的选择即胡子）

<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-11 01:34:16

凌乱的jquery + HTML + PHP

回答

相关问题