2012-02-07 3 views
0

나는 사람들이 Twitter처럼 활동을 공유 할 수있는 웹 사이트를 가지고 있습니다. 사용자는 좋아할 수 있고 댓글을 달 수 있습니다.jquery php json 목록

기본적으로 필터는 날짜 목록을 필터링합니다. 예를 들어 오늘부터 모든 활동을 보여 주면 Ajax 컨트롤러에 요청을 보내면 각 활동에 대한 json이 전송됩니다. 필터 기준에 따라 모든 작업이 완료되었습니다.

"현재 활동"과 같은 필터 기준을 누르면 현재 javacript 메소드 인 LoadActivities (필터)가 호출됩니다. 그리고 그것은 단지 json을 호출하고, 그것을 분석하고, 모든 액티비티들을 보여줄 것입니다. 이제는 Likes와 Comments를 처리하는 가장 좋은 방법은 무엇인지 생각해 봅시다 :

각각의 버튼은 id가 " ActivityLike_ {ACTIVITY_ID} "를 클릭 한 다음 클릭 이벤트를 만들고 '_'로 분할하고 액티비티의 ID를 얻은 후 사용자가 버튼을 누르면 해당 페이지에서 하나의 액티비티를 다시 렌더링해야합니다. like "는"더 이상 좋아하지 않는다 "등으로 변경되어야합니다. 주석 달기와 동일합니다.

그래서 어떻게 '_'나 다른 불쾌한 해결책을 사용하지 않고이 목록을 만들지 만, 어떻게 적절하게 정리할 수 있습니까? jQuery의 "라이브"이벤트와 동일한 질문이나, 사용하기 좋은지 또는 해결 방법이 있습니까?

읽어 주셔서 감사합니다.

답변

1

처음에는 자바 스크립트에 크게 의존하는 응용 프로그램을 만들고있는 것 같으며 progressive enhancement이라는 용어는 거의 없습니다. 이것이 잘 결정되면, 차갑다.

내가 추천 할만한 한 가지는 ID를 분할하는 것보다는 주변에 data-* 속성을 사용하는 것입니다. ActivityLike_ID 대신에 ActivityLike의 클래스가 있고 Iddata-id 속성의 각 요소를 제공하십시오. 당신은 그 때 가지고 있습니다.

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

굉장합니다.

like <--> unlikecomment <--> remove comment의 간단한 사례가 있으므로 JavaScript에서 쉽게 처리 할 수 ​​있습니다. 상태 중 하나가 선택 될 때 요소에 클래스를 추가하거나 데이터 속성을 설정할 수 있습니다. 코드를 간단하게 검사하면 링크를 어떻게 렌더링할지 알 수 있습니다.

나중에 더 복잡한 조작이 발생할 가능성이있는 경우 서버가 페이지에서 변경할 내용을 제어하게 할 수 있습니다 (서버가 클라이언트보다 요청에 대한 컨텍스트가 많을 수 있음).

서버가 다음과 같은 데이터 구조를 반환하도록하십시오.

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

.l.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"] 
    } 
] 

주 (이 예에서 요소가 하나만 있음).

+0

나는이 해결책을 좋아한다! 내가 잘 이해한다면? 사용자는 3 개의 활동을 가지고 있고 두 번째 활동을 좋아하지만 서버는 다음을 반환합니다. selector -> .like, data-id -> activityId, operator -> html, params -> '이 활동이 마음에 들지 않으려면 클릭하십시오' – randomKek

+0

@MikeVercoelen : 거의. 서버가 응답을 보내도록 응답을 업데이트했습니다. – Matt

+0

끝내 주면 고마워요. 정말 고마워요. :) – randomKek

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.