通過JSON/AJAX更新HTML

自從我聽說它以來，我一直在使用JSON處理AJAX功能，因爲使用RJS /呈現HTML「感覺」錯誤，因爲它違反了MVC。我工作的第一個AJAX項目最終以20-30個控制器操作直接綁定到特定的UI行爲，我的視圖代碼遍佈控制器操作，部分和rjs文件。使用JSON允許您在視圖中保留特定於視圖的代碼，並且只能通過AJAX查看agnostic/RESTful控制器操作來獲取所需數據。通過JSON/AJAX更新HTML

我從使用純JSON發現的一個令人頭痛的問題是，您必須通過JS'呈現'HTML，這對於需要更新DOM重元素的AJAX來說可能是一個真正的痛苦。我最終得到長字符串的構建代碼，如

// ...ajax 
success: function(records){ 
    $(records).each(function(record){ 
    var html = ('<div id="blah">' + record.attr + 
     etc + 
    ') 
    }) 
}

其中etc是根據記錄數據動態構建HTML的10-15行。除了煩惱外，更嚴重的缺點是HTML結構的重複（在模板和JS中）。*這種方法是否有更好的做法？

（我爲終於伸手動機是我現在有更新HTML如此複雜，它需要Ruby代碼的兩個嵌套循環首先進行渲染。複製在Javascript中似乎瘋狂的任務。）

我考慮的一件事是直接從文件系統加載靜態部分文件，但這似乎有點多。

來源

2010-01-18 tfwright

只是偶然發現正是我一直在尋找：Jaml

來源

2010-01-21 23:48:41 tfwright

這仍然有點混亂，你必須在Javascript中包含佈局。我非常喜歡John Resig在其他答案中的模板，這些答案非常清楚（大部分）將用戶界面和控制器分開。很好，如果Jaml爲你工作:) – Jaanus 2010-01-22 00:28:53

你可以在jQuery中使用load函數; 此加載頁面的內容到這樣一個div：

$('#content').load("content/" + this.href.split('#')[1] + ".html", '', checkResponse);

只是做一個動態的觀點，你是好去...

來源

2010-01-18 19:18:57 fijter

我_could_，但這讓我回到了我想要做的每個AJAX更新的具體操作/部分的糟糕的過去。對於一個狂熱的狂熱者來說，這是非常痛苦的。我希望這不是唯一的實用解決方案。 – tfwright 2010-01-18 19:31:11

我會創建一個包含佔位符的HTML結構去您需要通過AJAX更新元素。它適用的結構多少取決於你正在更新的內容;如果你知道你將有時間提前元素的數量，這將是東西的

<div id="article1"> 
    <div id="article1Headline"></div> 
    <div id="article1Copy"></div> 
    <div id="article1AuthorInfo"></div> 
</div> 
<div id="article2"> 
    <div id="article2Headline"></div> 
    <div id="article2Copy"></div> 
    <div id="article2AuthorInfo"></div> 
</div>

然後編寫代碼，直接引用的每個元素的id的效果，並插入到.innerHTML屬性（或者jquery做同樣事情的任何語法上更含糊的方式）。恕我直言，分配每個元素的內容並不是非常可怕的，你不想通過AJAX函數散佈的部分是HTML結構本身;在你的應用中，內容無論如何都是不穩定的。

但是，它看起來像你可能有未知數量的元素的列表，在這種情況下，它可能是你需要只是把一個佔位符：

<div id="articleList"></div>

在這種情況下，我真的不明白的方式，以避免建立HTML結構在JavaScript調用，但你的JavaScript分解的合理數量應該幫助的是：

function addArticle(headline, copy, authorInfo, i){ 
    createDiv("article" + i + "Headline", headline); 
    createDiv("article" + i + "Copy", copy); 
    createDiv("article" + i + "AuthorInfo", authorInfo); 
}

（不工作，當然代碼，但你的想法，）

來源

2010-01-18 19:59:00

是的，我已經在儘可能使用佔位符。分解函數本身的更常見的建議是有幫助的。實際上，我非常喜歡這個代碼，它看起來像一個潛在的jQuery插件...確實：http://blogs.microsoft.co.il/blogs/basil/archive/2008/08/21/jquery-create-jquery -plug-in-to-create-elements.aspx – tfwright 2010-01-18 20:10:36

我喜歡模板化的想法。根據我的經驗，它可以真正清理那些混亂的字符串操作！

解決方法有很多，比如，檢查了約翰Resig的（jQuery的作者）：

http://ejohn.org/blog/javascript-micro-templating/

來源

2010-01-18 21:05:29 Ben

很棒的鏈接，謝謝 – tfwright 2010-01-18 21:37:02

通過JSON/AJAX更新HTML

回答

相關問題