مسج UI: أفضل طريقة لتحميل ترميز HTML؟

Question

ما هي أفضل طريقة لتحميل ترميز HTML لمخصص مسج UI القطعة؟

وعناصر وحتى الآن، ورأيت خلق ببساطة عن طريق استخدام السلاسل (أي $(...).wrap('<div></div>')) التي على ما يرام لشيء بسيط. ومع ذلك، وهذا يجعل من الصعب للغاية لتعديل في وقت لاحق لمزيد من العناصر المعقدة.

وهذا يبدو وكأنه مشكلة شائعة إلى حد ما، لكنني أعرف أيضا أن مكتبة مسج UI هو جديد بما فيه الكفاية التي قد لا يكون هناك حل مقبول على نطاق واسع لهذا الغرض. أي أفكار؟

Answer 1

وشيء وهو أنيق جدا القيام به هو هذا:

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

وبهذه الطريقة، تقوم بإنشاء عنصر، وتخزين مرجعها في متغير، لاستخدامها لاحقا.

Answer 2

إذا كان لديك كمية كبيرة من HTML معقدة، ولا يرغبون في التعامل مع سلاسل ضمنية في شفرة جافا سكريبت الخاصة بك، يمكنك وضعه في ملف HTML منفصل واستخدام في اياكس تحميل وظيفة .

وانها chainable، حتى تتمكن من تحميل ملف HTML (كل شيء أو جزء مختارة)، حقنه DOM الحالي الخاص بك، والحفاظ على الحق في الذهاب.

Answer 3

وهناك الكثير من الأوقات لقوالب معقدة حقا وأنا مجرد تخزين كتل أتش تي أم أل كسلاسل في كائنات JSON للوصول لاحق ... على سبيل المثال:

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

وبعد ذلك فقط تنفيذ بعض بديل عن تلك عندما تأتي الأمور مرة أخرى. وبهذه الطريقة يتم فصل ترميز إلى حد ما من منطق لتحميل البيانات، مبادلة ذلك من القوالب وغيرها يمكن أن يكون أسرع قليلا.

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

وعلى أي حال، لقد عملت هذه الطريقة بشكل جيد بالنسبة لي مع الحاجيات AJAX وهذا النوع من الشيء، حيث كان هناك احتمال أن التصميم قد يحدث تغييرا جذريا حولها.

Answer 4

وA، طريقة فعالة شعبية لإخراج كل من العلامات الإضافية الخاصة بك (أيا كان قد تحتاج لاحقا) إلى الجزء السفلي من الصفحة الخاصة بك في علامات البرنامج النصي، بحيث لا يتم تقديم العلامات من قبل المتصفح.

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

ويمكنك بعد ذلك الاستيلاء على الترميز باستخدام مسج ...

var markup = $('#template-example').html();

وتحليل تلك JS أمثلة رميت في وجود باستخدام محرك النموذجيه، مثل واحد في Underscore.js (التي أوصي)، أو واحدة من تلك مسج في هذه الإجابة: مسج النموذجيه محركات

والمتعة!