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

一个选项可以是创建一个 html 文档并使用load()方法：

从服务器加载数据并将返回的 HTML 放入匹配的元素中。

标记.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 回答