सर्वर-साइड रेजर व्यू और क्लाइंट-साइड jQuery टेम्पलेट के बीच डुप्लिकेट स्वरूपण से बचें

Question

मेरे पास एक खोज परिणाम पृष्ठ है जहां मैं एक एमवीसी रेजर व्यू का उपयोग करके किसी विशेष तरीके से स्वरूपित वस्तुओं की एक सूची आउटपुट करता हूं।

@for (int i = 0; i < group.Count(); i++) { 
    <div class="result"> 
    <div class="ordinal">@((i+1).ToString()).</div> 
    <div class="detail"><p>@group.ElementAt(i).Name</p></div> 
    </div> 
} 

ग्राहक आगे jQuery AJAX का उपयोग कर JSON और jQuery टेम्पलेट्स के रूप में एक नया डाटासेट पुनर्प्राप्त करने के लिए मूल के स्थान पर resultset रेंडर करने के लिए उन परिणामों को फ़िल्टर कर सकते हैं। यह jQuery खाका है:

<script id="resultTemplate" type="text/x-jquery-tmpl"> 
    {{each(i, result) results}} 
    <div class="result"> 
     <div class="ordinal">${i+1}.</div> 
     <div class="detail"><p>${name}</p></div> 
    </div> 
    {{/each}} 
</script> 

जो AJAX कॉल के बाद ही है:

var result = $("#resultTemplate").tmpl({ results: data }); 
$("#resultsColumn").empty().append(result); 

नोट कैसे मैं HTML दोनों सर्वर साइड उस्तरा कोड और ग्राहक में कोई खोज परिणाम के लिए स्वरूपण नकल करने के लिए किया था पक्ष jQuery कोड। जब मुझे परिवर्तन करना पड़ता है तो मैं विसंगतियों के अवसर को कम करने के लिए डेटा बाध्य टेम्पलेट का केवल एक संस्करण रखना चाहता हूं।

Stephen Walter's Intro to jQuery Templates पढ़ना 0 एएसपी.नेट एमवीसी के साथ jQuery टेम्पलेट्स का उपयोग करते समय वह "बेहतर एक साथ" एकीकरण पर संकेत दे रहा है, इसलिए मैं सोच रहा था कि उपरोक्त परिदृश्य को संबोधित करने वाली सुविधा है या नहीं।

धन्यवाद।

Answer 1

मुझे लगता है कि आप डुप्लिकेट मार्कअप से बचने के लिए @helper वाक्यविन्यास का उपयोग कर सकते हैं।

@helper Result(string ordinal, string name) { 
    <div class="result"> 
     <div class="ordinal">@ordinal.</div> 
     <div class="detail"><p>@name</p></div> 
    </div> 
} 

फिर दोनों उस्तरा दृश्य

@for (int i = 0; i < group.Count(); i++) { 
    @Result((i+1).ToString(), group.ElementAt(i).Name) 
} 

और jQuery टेम्पलेट

<script id="resultTemplate" type="text/x-jquery-tmpl"> 
    {{each(i, result) results}} 
     @Result("${i+1}", "${name}") 
    {{/each}} 
</script> 

अपने jQuery टेम्पलेट उस्तरा दृश्य अपने आप में रहता है यह सोचते है कि के लिए सहायक का उपयोग करें।

नकारात्मक पक्ष पर, आपको प्रत्येक तर्क को सहायक में पास करने से पहले स्ट्रिंग में परिवर्तित करना होगा। और, किसी कारण से, सहायक को "${i+1}" पास करना सादा गलत लगता है।

मुझे यकीन नहीं है कि मैं उत्पादन में उस तरह के दृष्टिकोण का उपयोग करूंगा, लेकिन मुझे लगता है कि यह शामिल मार्कअप की जटिलता पर निर्भर करता है।

Answer 2

आप रेज़र सिंटैक्स का उपयोग करने के बजाय प्रारंभिक खोज परिणाम को उसी jquery टेम्पलेट के साथ प्रस्तुत कर सकते हैं, यह डुप्लिकेशन से बचाता है। आप इसे दृश्य में डाल सकते हैं:

<script type="text/javascript"> 
    $('#resultTemplate') 
    .tmpl(@group.ToJson())) 
    .appendTo("#resultTemplate"); 
</script> 

मैंने समूह ऑब्जेक्ट पर ToJson विधि बनाई है। यह एक ऐसा तरीका हो सकता है जिसे आप अपने व्यूमोडेल पर लागू करते हैं या जो कुछ भी समूह var जेएसन में संग्रह को क्रमबद्ध करने के लिए आ रहा है।