เครื่องยนต์ jQuery templating [ปิด]

ฉันกำลังมองหาเอ็นจิ้นแม่แบบเพื่อใช้ฝั่งไคลเอ็นต์ ฉันลองใช้บางอย่างเช่น jsRepeater และ jQuery Templates ในขณะที่พวกเขาดูเหมือนจะทำงานได้ดีใน FireFox พวกเขาทั้งหมดดูเหมือนจะพังลงใน IE7 เมื่อมันลงมาเพื่อแสดงผลตาราง HTML

ฉันยังดูที่ MicrosoftAjaxTemplates.js (จากhttp://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 ) แต่ปรากฎว่ามีปัญหาเดียวกัน

คำแนะนำเกี่ยวกับเครื่องมือสร้างแรงดันไฟฟ้าอื่น ๆ ที่จะใช้?

ตรวจสอบริกราล์โพสต์Templating ไคลเอ็นต์กับ jQuery เขาสำรวจ jTemplates แต่ทำให้เป็นกรณีที่ดีกว่าสำหรับโซลูชัน micro-templatingของ John Resig แม้จะปรับปรุงบางอย่าง การเปรียบเทียบที่ดีมีตัวอย่างจำนวนมาก

เพียงแค่ได้บางวิจัยเกี่ยวกับเรื่องนี้และฉันจะใช้jQuery-tmpl ทำไม?

1. มันเขียนโดย John Resig
2. มันจะได้รับการดูแลโดยทีมหลัก jQuery ในฐานะที่เป็นปลั๊กอิน "เป็นทางการ" แก้ไข: ทีม jQuery เลิกใช้งานปลั๊กอินนี้แล้ว
3. มันสมดุลที่สมบูรณ์แบบระหว่างความเรียบง่ายและฟังก์ชั่น
4. มันมีไวยากรณ์ที่สะอาดและคิดออกดีมาก
5. มันเข้ารหัส HTML โดยค่าเริ่มต้น
6. มันขยายได้อย่างมาก

เพิ่มเติมได้ที่นี่: http://forum.jquery.com/topic/templating-syntax

jQote: http://aefxx.com/jquery-plugins/jqote/

มีคนใช้โซลูชันไมโครเทมเพลตของ Resig แล้วบรรจุลงในปลั๊กอิน jQuery

ฉันจะใช้มันจนกว่า Resig จะเปิดเผยตัวเขาเอง (ถ้าเขาเผยแพร่ตัวเอง)

ขอบคุณสำหรับเคล็ดลับ ewbi

jQuery Nano :

เครื่องมือสร้างเทมเพลต

การใช้งานพื้นฐาน

สมมติว่าคุณมีการตอบสนอง JSON:

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

คุณสามารถทำได้:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

และคุณจะได้รับสตริงพร้อม:

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

หน้าทดสอบ ...

jQuery-tmpl จะอยู่ในจุดเริ่มต้นหลักของ jQuery ใน jQuery 1.5:

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

เอกสารอย่างเป็นทางการอยู่ที่นี่:

http://api.jquery.com/category/plugins/templates/

แก้ไข: มันถูกปล่อยออกมาจาก jQuery 1.5 และตอนนี้จะได้รับการประสานงานโดยทีม jQuery UI เนื่องจากมันจะขึ้นอยู่กับ jQuery UI Grid ที่กำลังจะมาถึง

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

ไม่แน่ใจว่ามันจัดการกับปัญหาเฉพาะของคุณได้อย่างไร แต่ยังมีเครื่องมือเทมเพลตPURE

ขึ้นอยู่กับว่าคุณกำหนด "ดีที่สุด" อย่างไรโปรดดูโพสต์ของฉันที่นี่ในหัวข้อ

หากคุณมองหาที่เร็วที่สุดนี่เป็นเกณฑ์มาตรฐานที่ดีดูเหมือนว่าDoTจะชนะและทิ้งทุกคนไว้เบื้องหลัง

หากคุณกำลังมองหาปลั๊กอิน JQuery ที่เป็นทางการที่สุดนี่คือสิ่งที่ฉันค้นพบ

ตอนที่ 1: เทมเพลต JQuery

ปลั๊กอินเท็มเพลต JQuery เบต้าอย่างเป็นทางการชั่วคราวคือ http://api.jquery.com/category/plugins/templates/

แต่เห็นได้ชัดว่าเมื่อไม่นานมานี้มีการตัดสินใจที่จะเก็บไว้เป็นเบต้า ...

หมายเหตุ: ทีม jQuery ได้ตัดสินใจที่จะไม่ใช้ปลั๊กอินนี้ในช่วงเบต้า มันไม่ได้ถูกพัฒนาหรือดูแลอย่างจริงจังอีกต่อไป เอกสารยังคงอยู่ที่นี่ในขณะนี้ (สำหรับการอ้างอิง) จนกว่าปลั๊กอินแม่แบบการแทนที่ที่เหมาะสมจะพร้อมใช้งาน

ส่วนที่สอง: ขั้นตอนต่อไป

แผนงานใหม่ดูเหมือนจะจุดมุ่งหมายสำหรับชุดใหม่ของปลั๊กอินJSRender (อิสระจาก DOM และแม้แต่ JQuery เครื่องมือการแสดงผล template) และJSViewsซึ่งมีข้อมูลที่ดีบางอย่างมีผลผูกพันและสังเกตการณ์ / รูปแบบการดำเนินสังเกต

นี่คือการโพสต์บล็อกในหัวข้อ

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

และนี่คือแหล่งข้อมูลล่าสุด

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

แหล่งข้อมูลอื่น ๆ

• การนำเสนอที่ดีในหัวข้อhttp://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• การสาธิตการทำงาน: http://borismoore.github.com/jsviews/demos/index.html

โปรดทราบว่ามันยังไม่ได้อยู่ในรุ่นเบต้าและเป็นเพียงรายการแผนที่ถนน แต่ดูเหมือนว่าเป็นผู้สมัครที่ดีที่จะกลายเป็นส่วนขยาย JQuery / JQueryUI อย่างเป็นทางการสำหรับแม่แบบและ UI ที่มีผลผูกพัน

เพื่อเป็นคนโง่เท่านั้น ^^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/ ;)

นี่ไม่ใช่ jsquery ที่เฉพาะเจาะจง แต่นี่เป็นไลบรารีเทมเพลตที่สร้างจาก JS ซึ่งเผยแพร่โดย google ในรูปแบบโอเพนซอร์ส:

http://code.google.com/p/google-jstemplate/

สิ่งนี้ช่วยให้การใช้องค์ประกอบ DOM เป็นแม่แบบและเป็นผู้เข้าร่วมอีกครั้ง (ในการแสดงผลของการแสดงผลแม่แบบที่ยังคงเป็นแม่แบบที่สามารถแสดงผลอีกครั้งด้วยรูปแบบข้อมูลที่แตกต่างกัน)

คนอื่น ๆ ก็ชี้ jquery-tmpl และฉันได้ตอบคำถามเหล่านี้แล้ว แต่ให้แน่ใจว่าได้ดูที่ GitHub ส้อม

มีการแก้ไขที่สำคัญออกมีและคุณสมบัติที่น่าสนใจเช่นกัน http://github.com/jquery/jquery-tmpl/network

John Resig มีสิ่งที่เขาโพสต์ไว้ในบล็อกของเขา http://ejohn.org/blog/javascript-micro-templating/

หากคุณกำลังทำงานใน NET Framework 2.0 / 3.5, คุณควรจะดูที่ JBST เป็นดำเนินการโดยhttp://JsonFx.net มันมีโซลูชันการสร้างเทมเพลตที่ฝั่งไคลเอ็นต์ที่มีไวยากรณ์ JSP / ASP ที่คุ้นเคย แต่ถูกคอมไพล์ก่อนหน้าในเวลาบิลด์สำหรับเท็มเพลตที่สามารถแคชขนาดกะทัดรัดที่ไม่จำเป็นต้องแยกวิเคราะห์ตอนรันไทม์ มันทำงานได้ดีกับ jQuery และไลบรารี JavaScript อื่น ๆ เนื่องจากเทมเพลตเหล่านี้จะถูกรวบรวมเป็น JavaScript บริสุทธิ์

ฉันใช้ jtemplates jquery pluging แต่ประสิทธิภาพแย่มาก ฉันเปลี่ยนเป็น trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ) ซึ่งมีประสิทธิภาพดีกว่ามาก ฉันไม่พบปัญหาใด ๆ กับ IE7 หรือ FF

สำหรับงานที่เบามาก jquery-tmpl นั้นเพียงพอ แต่ในบางกรณีข้อมูลจำเป็นต้องรู้วิธีการฟอร์แมตตัวเอง (สิ่งเลวร้าย!)

หากคุณกำลังมองหาแม่แบบที่โดดเด่นเต็มมากขึ้นปลั๊กอินผมขอแนะนำOrange-J มันได้รับแรงบันดาลใจจาก Freemarker รองรับหากมีสิ่งอื่นวนซ้ำวัตถุและอาร์เรย์อินไลน์จาวาสคริปต์รวมถึงแม่แบบภายในเทมเพลตและมีตัวเลือกการจัดรูปแบบที่ยอดเยี่ยมสำหรับเอาต์พุต (maxlen, wordboundary, htmlentities ฯลฯ )

โอ้และไวยากรณ์ง่าย

คุณอาจต้องการคิดสักเล็กน้อยว่าคุณต้องการออกแบบแม่แบบของคุณอย่างไร

ปัญหาหนึ่งที่มีโซลูชันเทมเพลตหลายรายการที่ระบุไว้ (jQote, jquery-tmpl, jTemplates) คือสิ่งที่พวกเขาต้องการให้คุณแทรกไม่ใช่ HTML ใน HTML ของคุณซึ่งอาจเป็นปัญหาในการทำงานกับเครื่องมือ HTML หรือในกระบวนการพัฒนากับนักออกแบบ HTML . โดยส่วนตัวฉันไม่ชอบความรู้สึกของวิธีการนั้นแม้ว่ามันจะมีข้อดีและข้อเสีย

มีคลาสของเทมเพลตอีกวิธีหนึ่งที่ใช้ HTML ปกติ แต่อนุญาตให้คุณระบุการเชื่อมโยงข้อมูลที่มีแอตทริบิวต์องค์ประกอบคลาส CSS หรือการแมปภายนอก

สิ่งที่น่าพิศวงเป็นตัวอย่างที่ดีของวิธีการนี้ แต่ฉันไม่ได้ใช้มันด้วยตัวเองดังนั้นฉันจึงปล่อยให้มันลงคะแนนเพื่อตัดสินใจว่าคนอื่นจะชอบหรือไม่ อย่างน้อยก็จนกว่าฉันจะมีเวลาเล่นกับมันมากขึ้น

PURE ที่ระบุว่าเป็นคำตอบอื่นเป็นอีกตัวอย่างหนึ่งของวิธีการนี้

สำหรับการอ้างอิงคุณสามารถดูchain.jsได้ แต่ดูเหมือนว่าจะไม่ได้รับการปรับปรุงมากนักตั้งแต่รีลีสดั้งเดิม สำหรับข้อมูลเพิ่มเติมเกี่ยวกับมันดูhttp://javascriptly.com/2008/08/a-better-javascript-template-engine/

Dropboxโดยใช้แม่แบบเอนจิ้นของ John Resigบนเว็บไซต์ มีการแก้ไขเล็กน้อยคุณสามารถตรวจสอบในไฟล์ jsของดรอปบ็อกซ์นี้ได้ ค้นหาไฟล์นี้เพื่อหา tmpl และคุณจะได้รหัสของเครื่องมือเทมเพลต

ขอบคุณ หวังว่ามันจะมีประโยชน์สำหรับใครบางคน

ขณะนี้ฉันกำลังใช้กรอบงานเทมเพลต HTML หลายรายการ กรอบงานนี้ทำให้การนำเข้าข้อมูลเทมเพลตใน DOM ของคุณง่ายขึ้นมาก นอกจากนี้การสร้างแบบจำลอง MVC ที่ยอดเยี่ยม

http://www.enfusion-framework.org/ (ดูตัวอย่าง!)

นอกจากนี้ยังมีการเขียนใหม่ของ PURE โดย beebole - jquery pure html templates - https://github.com/mpapis/jquery-pure-templates

ควรอนุญาตให้เรนเดอร์อัตโนมัติทำงานได้มากขึ้นโดยส่วนใหญ่ใช้ตัวเลือก jquery สิ่งที่สำคัญกว่าคือไม่ต้องใส่สิ่งแฟนซีลงใน HTML