यदि आप गहन AJAX कार्यों को करने की योजना बना रहे हैं, जैसे नए रिकॉर्ड जोड़ना, उन्हें फ्लाई पर संपादित करना आदि, तो मैं आपको एक खाली पृष्ठ लोड करने का सुझाव देता हूं, जो एक स्क्रिप्ट को कॉल करता है जो शब्दकोशों की एक सरणी देता है JSON, और उसके बाद हाल ही में jQuery में लागू Template (बीटा) सिस्टम का उपयोग कर, या एक स्वयं को कार्यान्वित करें, जिसमें छुपा तत्व है, कक्षाओं के साथ टैग किए गए स्पैन/divs/tds के साथ, और क्लोनिंग और प्रत्येक बार एक नया रिकॉर्ड आने पर इसे भरना।
दूसरी तरफ, यदि आप इस स्थिर को रखने जा रहे हैं, तो बस HTML का उपयोग करें।
इस प्रकार मैं templating का प्रबंधन करता हूं। यह एक प्रभावी तरीका है क्योंकि डीओएम तत्व डीओएम पेड़ में मौजूद हैं, और तत्वों को शामिल करने वाली स्ट्रिंग को पार्स करने से क्लोनिंग कम महंगी होती है।
<html>
<head>
<script type="text/javascript">
$(function() {
$contactTemplate = $("#contact_template")
function makeContactElement(data) {
var $newElem = $contactTemplate.clone(true)
$newElem.attr("data-id", data.id)
$newElem.find(".name").text(data.firstName + " " + data.lastName)
for(var i in data.info) {
$newElem.find(".info").append(makeInfoElement(data.info[i]))
}
return $newElem
}
$infoTemplate = $("#info_template")
function makeInfoElement(data) {
var $newElem = $infoTemplate.clone(true)
$newElem.find("infoLabel").text(info.label)
$newElem.find("infoPiece").text(info.piece)
return $newElem
}
$.getJSON('/foo.bar', null, function(data) {
for(var i in data) {
$("#container").append(makeInfoElement(data[i]))
}
})
})
</script>
<style type="text/css">
.template { display: none; }
</style>
</head>
<body>
<div id="container">
</div>
<!-- Hidden elements -->
<div id="contact_template" class="contact template">
<a rel="123" class="name"></a>
<div class="info"></div>
</div>
<div id="info_template" class="template">
<div class="infoLabel"></div>
<div class="infoPiece"></div>
</div>
</body>
</html>
तब, जब आप एक नया रिकॉर्ड बनाने के लिए, बस जानकारी के साथ एक डेटा वस्तु को भरने, और आप सुनिश्चित करें कि सभी तत्व प्रवाह सामान्य हो जाएगा कि करेंगे।
.clone(true) का उपयोग करके लाइव ईवेंट को बाध्य करने के बजाय सामान्य घटनाएं बनाने के लिए दरवाजा खुलता है, जो अधिक महंगा है।
उदाहरण के लिए, यदि आप एक रिकॉर्ड को हटाने के लिए एक बटन बनाने के लिए चाहते हैं:
<script ...>
...
$("#contact_template .delete").click(function() {
var id = $(this).parents("contact").attr("data-id")
$.post('/foo.bar', { action: delete, id: id }, function() { ... })
return false
})
</script>
...
<div id="contact_template" class="contact template">
<a href="#" class="delete">Delete</a>
</div>
गुड लक!
+1 एक प्रदर्शन परिप्रेक्ष्य से महान जवाब। मैं यह भी जोड़ना चाहता हूं कि एचटीएमएल और जेएसओएन के बीच का निर्णय यह भी निर्भर करता है कि डेटा स्थिर और विशुद्ध रूप से प्रदर्शन उद्देश्यों के लिए है या फिर आप इसे बाद में कुशल बनाना चाहते हैं या नहीं। –