4

最近、Facebook に似た壁を作りました。

そして、アドバイスやより良い方法が必要です。

したがって、ユーザーが投稿を送信したとき、結果を div の前に追加し、このようにしました。

$('.get_posts').prepend('<div id="'+stream.sid+'"class="row stream-posts"><div class="span1 stream-thumb"><ul class="thumbnails"><li><a href="#" class="thumbnail"><img src="http://placehold.it/60x60" alt=""></a></li></ul></div><div class="span5 stream-content"><a href="#" class="author">'+stream.author+'</a><p>'+stream.text+'</p></div></div>');

私はそれが最善ではないことを知っており、より経験豊富な開発者に、データを先頭に追加するよりクリーンな方法があるかどうか尋ねたいと思います.

4

4 に答える 4

4

1つのオプションは、htmlドキュメントを作成してload()メソッドを使用することです:

サーバーからデータをロードし、返された HTML を一致した要素に配置します。

markup.html:

    <div class="span1 stream-thumb">
      <ul class="thumbnails">
         <li>
           <a href="#" class="thumbnail"><img src="http://placehold.it/60x60" alt=""></a>
         </li>
      </ul>
     </div>
     <div class="span5 stream-content">
        <a href="#" class="author"></a>
        <p></p>
     </div>


$('.get_posts').prepend('<div id="'+stream.sid+'" class="row stream-posts"></div>');
$("#" + stream.sid).load('markup.html', function(){
   $(this).find('a:last').text(stream.author);
   $(this).find('p:last').text(stream.text)
})
于 2012-07-08T12:17:11.620 に答える
3

これを行うためのはるかにクリーンな方法は、投稿に必要なHTMLを生成する関数を作成することです-

function createPost(postDetails){
  var html = '';
    html += '<div id="'+postDetails.sid+'"class="row stream-posts">';
    html += '  <div class="span1 stream-thumb">';
    html += '   <ul class="thumbnails">';
    html += '    <li>';
    html += '      <a href="#" class="thumbnail">';
    ...
  return html;
}

このようにして、単純に実行$('.get_posts').prepend(createPost(postData));し、引数を介して関連するすべてのデータを関数に渡すことができpostDataます。はるかにクリーンでメンテナンスが簡単です。

ウォールアップデートの実装方法によっては、サーバー上にこのHTMLブロックを作成して、そのまま送信できる場合もあります。そうすれば、JavaScriptはマークアップの構築について心配する必要がなくなります。AJAX呼び出しから取得したデータを追加するだけです。

于 2012-07-08T12:08:14.230 に答える
3

私も、関数を使用することをお勧めします。私のアプローチは、他の関数ベースのアプローチとほぼ同じですが、HTML を文字列として扱うのではなく、さまざまな属性を持つ要素を作成する必要があります (両方の方法が機能し、HTML- as-string アプローチの方が確かに簡潔です)。

ただし、私の経験では、このアプローチにより、HTML 文字列が適切に閉じられてエスケープされているかどうかを覚えておく必要なく、出力をより簡単に修正できます。

function prependNewPost(elem, stream) {
    var outerDiv = $('<div />', {
        'id': stream.sid,
        'class': 'row stream-posts'
    }),
        innerDiv = $('<div />', {
            'class': 'span1 stream-thumb'
        }).appendTo(outerDiv),
        ul = $('<ul />', {
            'class': 'thumnails'
        }).appendTo(innerDiv),
        li = $('<li />').appendTo(ul),
        a = $('<a />', {
            'href': '#'
        }).appendTo(li),
        image = $('<img />', {
            'src': 'http://placehold.it/60x60',
            'alt': ''
        }).appendTo(a),
        secondInnerDiv = $('<div />', {'class' : 'span5 stream-content'}).appendTo(outerDiv);
    var p = $('<p />').text(stream.text).appendTo(secondInnerDiv);
    outerDiv.prependTo(elem);
}

$('#add').click(
    function() {
        var stream = {};
        stream.sid = 'two';
        stream.author = 'Geoff';
        stream.text = 'Some text, a pseudo-Lorem ipsum, if you will...';
        prependNewPost($('#stream'),stream);
        });​

JS フィドルのデモ。

参考文献:

于 2012-07-08T12:26:42.547 に答える
0

ajax関数を呼び出すのはどうですか？次に、入力されたデータを保存し、おそらくスマイリー/リンクを解析し、解析されたテキストで div 全体を返し、それを壁に追加することができます。

于 2012-07-08T12:06:01.043 に答える