jquery php json列表

我有一個網站，人們可以像Twitter一樣分享活動，用戶可以像他們一樣評論他們。jquery php json列表

基本上有一個篩選日期列表的過濾器，例如，向我展示今天的所有活動，會發生什麼是我們向我們的ajax控制器發出請求，並且它會向我發送每個活動的json基於過濾標準，我得到了所有的工作。

如何，現在的工作原理是，當你按下例如過濾標準「今天的活動」，我們調用JavaScript方法LoadActivities（過濾器）;它只會調用json，解析它並顯示所有活動，現在問題是什麼纔是處理喜歡和評論的最佳方式，我是怎麼想到的：

每個像按鈕都有id「 ActivityLike_ {ACTIVITY_ID}「，然後創建一個點擊事件，並用'_'拆分，然後瞧到活動的id，但是一旦用戶按下了類似按鈕，就需要在頁面上重新呈現單個活動，因爲」像「必須改變爲」不再像「等。與評論相同。

那麼，如何構建這個列表，而不是使用分裂「_」和其他令人討厭的解決方案，但我怎麼可以這樣在一個適當的清潔方法是什麼？與jQuery「現場」活動相同的問題，它們很好用，或者有解決方法嗎？

感謝您的閱讀。

來源

2012-02-07 randomKek

首先它似乎正在構建一個應用程序，它是JavaScript的嚴重依賴，並且確實很少在progressive enhancement條款。如果這是一個深思熟慮的決定，那麼很酷。

有一件事我會建議是儘量使用data-*屬性而不是分裂ID擺弄周圍。而不是ActivityLike_ID有一類ActivityLike，並給這些元素的每個data-id屬性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>"] 
    } 
]

即，一個映射到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不像一個活動，服務器可以響應;

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

注意param s必須是一個陣列（在本例中它僅僅有一個元素）。

來源

2012-02-07 10:45:52 Matt

我喜歡這個解決方案，謝謝！如果我理解得好？用戶有3個活動，他喜歡第二個活動，服務器返回：選擇器 - > .like，data-id - > activityId，運算符 - > html，params - >'你喜歡這個活動，點擊不像' – randomKek 2012-02-07 11:22:44

@MikeVercoelen ：差不多。我已經更新了我的答案，以包含服務器應該返回的響應。 – Matt 2012-02-07 11:30:14

真棒會玩這個，謝謝你的答案夥計真的幫助我！ :) – randomKek 2012-02-07 11:39:52

live()現在貶值了，你應該使用on()代替。

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

爲了避免分裂，你可以使用jQuery的data()方法，它會像

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

，你可以在jQuery的獲得與

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

這是唯一有效的但是HTML5中的HTML。

來源

2012-02-07 10:45:11

jquery php json列表

回答

相關問題