嘗試在Flask MiniTwit示例中實現類似Twitter的消息回覆示例

我在Flask MiniTwit示例中實現類似twitter的消息回覆，但現在我無法爲每個消息工作做出「回覆」按鈕，怎麼辦？嘗試在Flask MiniTwit示例中實現類似Twitter的消息回覆示例

<ul class=messages> 
{% for message in messages %} 
<li><img src="{{ g.get_user(message.author_id).email|gravatar(size=48)}}"><p> 
<strong><a href="{{ url_for('user_timeline', username=message.author_id) 
}}">{{ message.author_id }}</a></strong> 
{{ message.text }} 
<small>&mdash; {{ message.pub_date|datetimeformat }}</small> 
{% if g.user %} 
<script type=text/javascript> 
$(function() { 
    messageid = $('a#reply').data('messageid'); 
    $('a#reply').bind('click', function() { 
    $.getJSON($SCRIPT_ROOT + '/_get_replies', { 
    messageid: $('#reply').data('messageid'), 
    userid: $('#reply').data('userid') 
    }, function (data) { 
$('div#' + messageid).text(data.result) 
}); 
return false; 
}); 
}); 
</script> 
<p align=right style='text-align:right'><small> 
<a href=# data-userid="{{g.user._id}}" data-messageid="{{message._id}}" id="reply"> 
Reply 
</a></small></p> 
<p><div id="{{message._id}}">I TRY TO PUT REPLIES HERE!</div></p> 
{% endif %} 
{% else %} 
<li><em>There's no message so far.</em> 
{% endfor %} 
</ul>

之前點擊 '回覆' 按鈕，我的頁面是這樣的：

before click 'reply' button

單擊任何 '回覆' 按鈕後，頁面是這樣的：

After click any of the 'reply' buttons

來源

2012-02-21 Brent Jiang

當您返回HTML時，您正在使用text - HTML被轉義，導致您的問題 - 使用html代替：

// Change 
$('div#' + messageid).text(data.result) 
// to 
$('div#' + messageid).html(data.result) 
         ^^^^

幾個其他點的考慮：

每個ID應該在文檔中只有一次存在。與ID「回覆」有多個鏈接後會導致問題。完全放棄它，或將它改爲一堂課。
使用delegate（on如果你正在使用jQuery 1.7或更高版本），並結合只是一次根元素（在你的情況ul.messages）。這將頁面上的事件處理程序的數量減少到1，並且會導致大量消息的性能大大提高。
緩存您的選擇器以進一步提高性能 - 當您在第一階段獲得所有信息時，不需要再次訪問DOM 3次。

來源

2012-02-22 04:26:00

我已經實現了我的觀點，感謝您的寶貴建議！我不清楚「緩存你的選擇器......」 – 2012-02-26 15:43:21

@BrentJiang - 基本上，而不是執行'$（「some＃selector」）。some_action（）'然後在下一行執行'$（「some＃選擇器「）。another_action（）'你想這樣做：'var some_thing = $（」some＃selector「）; some_thing.some_action（）; some_thing.another_action（）;'這種方式jQuery只需要搜索DOM一次，你就可以獲得一個免費的性能提升。 – 2012-02-27 18:07:19

嘗試在Flask MiniTwit示例中實現類似Twitter的消息回覆示例

回答

相關問題