Flask MiniTwitのサンプルで

Question

のtwitterのようなメッセージの返信を実装しようとしましたが、FlaskのMiniTwitの例ではtwitterのようなメッセージの返信を実装するのに苦労しましたが、今は各メッセージの作業のために 'reply'クリック '返信' ボタンの前に

<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> 

、マイページには次のようである：

'返信' ボタンのいずれかをクリックした後、ページのようなある：

Answer 1

HTMLを返すときにtextを使用しています - HTMLがエスケープされ、問題が発生しました -を使用してください代わりに：

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

考慮すべき他のポイントのカップル：

1. を各IDは、文書内に一度だけ存在する必要があります。 ID「返信」を持つ複数のリンクを持つと、後で問題が発生します。それを完全に残すか、クラスに変更してください。
2. 使用delegate（onあなたはjQueryの1.7以上を使用している場合）と（あなたのケースul.messages中）ルート要素に一度だけをバインドします。これにより、ページ上のイベントハンドラの数が1に減少し、多数のメッセージでパフォーマンスが大幅に向上します。
3. パフォーマンスをさらに向上させるためにセレクタをキャッシュします。最初のパスですべての情報を取得した場合、DOMに3回移動する必要はありません。