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 フレームワークを使用している場合) を返すようにすることです。コードを 1 か所、部分ビューなどに配置し、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 に答える