jquery php json list

Question

私は、人々がTwitterのような活動を共有できるウェブサイトを持っており、ユーザーはそれらを好きにしてコメントすることができます。

基本的に、日付のリストをフィルタリングするフィルタがあります。たとえば、今日のすべてのアクティビティを表示すると、私たちはAjaxコントローラにリクエストを行い、各アクティビティのjsonを送信しますフィルタの基準に基づいて、私はすべての作業を得た。

現在の動作は、たとえば「今日のアクティビティ」などのフィルタ条件を押すと、javascriptメソッドLoadActivities（フィルタ）と呼ばれます。それはちょうどjsonを呼び出し、それを解析し、すべてのアクティビティを表示するようになりました。問題はLikesとCommentsを扱う最良の方法です。私はどう思いますか？

それぞれの好きなボタンは、 ActivityLike_ {ACTIVITY_ID} "をクリックしてクリックイベントを作成し、 '_'で分割してアクティビティのIDを取得しますが、ユーザーがlikeボタンを押すと、ページ上の1つのアクティビティを再レンダリングする必要があります。 "like"に変更する必要があります。コメントなどと同じです。

このリストを作成するには、分割 '_'やその他の厄介な解決策を使用しないでください。どうすれば適切な方法でこれを行うことができますか？ jQueryの "ライブ"イベントと同じ質問、彼らは使い易いのですか、それとも回避策がありますか？

読んでいただきありがとうございます。

Answer 1

まず、JavaScriptに大きく依存するアプリケーションを構築しているようですが、progressive enhancementという点ではほとんどありません。これがうまく考えられた決定であれば、冷静にしてください。

IDを分割するのではなく、data-*属性を使用することをお勧めします。 ActivityLike_IDの代わりにActivityLikeのクラスを持ち、Idのdata-id属性の各要素を指定します。あなたはそれを持っています。

$(document).on('click', '.ActivityLike', function() { 
    var theId = $(this).data('id'); 
}); 

驚くばかりです。

like <--> unlikeとcomment <--> remove commentという簡単なケースがあるので、これはJavaScriptで簡単に行うことができます。いずれかの状態が選択されているときにクラスに要素を追加したり、（nother）データ属性を設定することができます。コードを単純にチェックすると、リンクをどのようにレンダリングするかを知ることができます。

今後さらに複雑な操作が発生する可能性がある場合は、サーバーがそのページで何を変更するかを制御できるようにすることができます。

サーバーがこのようなデータ構造を返すようにします。

[ 
    { 
     "selector": "#something", 
     "operator": "append", 
     "params": ["<div>Hi</div>"] 
    } 
] 

e.e.e. jQuery操作にマップされるオブジェクトの配列selectorはjQueryセレクタを記述し、operatorは呼び出すjQueryメソッドであり、params属性はメソッドを渡すパラメータの配列です。

あなたのAJAXリクエストのレスポンスハンドラでは、次のことができます。

for (var i=0;i<response.length;i++) { 
    var curr = response[i]; 

    jQuery.fn[curr.operator].apply($(curr.selector), curr.params); 
} 

これらの操作を処理します。

具体的な例として、HTMLをアクティビティとは異なるものにするために、サーバーは次のように応答できます。 param sが（この例では、それが唯一の要素を持つ）配列でなければならないこと

[ 
    { 
     "selector": ".like[data-id=\"activityId\"]", 
     "operator": "html", 
     "params": ["you liked this activity, click to unlike"] 
    } 
] 

注。

Answer 2

live()は現在値下げされており、代わりにon()を使用する必要があります。

http://jqapi.com/#p=on

分割を避けるために、あなたは

var activityLike = $("input#myButtonId").data('activityLike'); 

これはのみ有効であるとjQueryの中で取得することができます

<input id="myButtonId" type="button" data-activityLike="{activityLike}"> 

ようなものになるだろうjQueryのdata()方法を、使用することができますHTML5のHTML。