Các công cụ tạo khuôn mẫu jQuery [đã đóng]

Tôi đang tìm kiếm một công cụ mẫu để sử dụng phía khách hàng. Tôi đã thử một vài cái như jsRepeater và jQuery Template. Mặc dù chúng có vẻ hoạt động tốt trong FireFox nhưng tất cả chúng dường như bị hỏng trong IE7 khi hiển thị các bảng HTML.

Tôi cũng đã xem MicrosoftAjaxTemsheet.js (từ http://www.codeplex.com/aspnet/Release/ProjectRelease.aspx?ReleaseId=16766 ) nhưng hóa ra cũng có vấn đề tương tự.

Bất kỳ lời khuyên về các động cơ templating khác để sử dụng?

Hãy xem bài viết của Rick Strahl Client Client Templating với jQuery . Anh khám phá jTem mẫu, nhưng sau đó tạo ra một trường hợp tốt hơn cho giải pháp tạo khuôn vi mô của John Resig , thậm chí cải thiện nó một số. So sánh tốt, rất nhiều mẫu.

Mới thực hiện một số nghiên cứu về điều này và tôi sẽ sử dụng jquery-tmpl . Tại sao?

1. Nó được viết bởi John Resig.
2. Nó sẽ được duy trì bởi nhóm jQuery cốt lõi như là một plugin "chính thức". EDIT: Nhóm jQuery đã không dùng plugin này.
3. Nó tạo ra sự cân bằng hoàn hảo giữa sự đơn giản và chức năng.
4. Nó có một cú pháp rất sạch sẽ và cũng nghĩ ra.
5. Nó mã hóa HTML theo mặc định.
6. Nó rất mở rộng.

Xem thêm tại đây: http://forum.jquery.com/topic/templating-syntax

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

Ai đó đã lấy giải pháp tạo khuôn vi mô của Resig và đóng gói nó vào một plugin jQuery.

Tôi sẽ sử dụng cái này cho đến khi Resig phát hành cái riêng của mình (nếu anh ta tự phát hành).

Cảm ơn vì tiền boa, ewbi.

jQuery Nano :

Công cụ mẫu

Cách sử dụng cơ bản

Giả sử bạn có phản hồi JSON sau đây:

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

bạn có thể làm:

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

và bạn có được chuỗi sẵn sàng:

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

Trang thử nghiệm...

jQuery-tmpl sẽ nằm trong lõi jQuery bắt đầu trong jQuery 1.5:

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

Tài liệu chính thức có tại đây:

http://api.jquery.com/carget/plugins/tem mẫu /

EDIT: Nó đã bị loại khỏi jQuery 1.5 và bây giờ sẽ được điều phối bởi nhóm UI UI, vì nó sẽ là một phần phụ thuộc của Lưới UI UI sắp tới.

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

Không chắc chắn cách nó xử lý vấn đề cụ thể của bạn, nhưng cũng có công cụ mẫu PURE .

Nó phụ thuộc vào cách bạn xác định "tốt nhất", vui lòng xem bài viết của tôi ở đây về chủ đề

Nếu bạn tìm kiếm nhanh nhất , đây là một điểm chuẩn tuyệt vời , có vẻ như DoT chiến thắng và bỏ lại những người khác

Nếu bạn đang tìm kiếm plugin JQuery chính thức nhất , đây là những gì tôi tìm ra

Phần I: Mẫu JQuery

Trình cắm mẫu JQuery beta, tạm thời chính thức là http://api.jquery.com/carget/plugins/tem mẫu /

Nhưng rõ ràng, cách đây không lâu, người ta đã quyết định giữ nó trong bản Beta ...

Lưu ý: Nhóm jQuery đã quyết định không đưa plugin này qua bản beta. Nó không còn được tích cực phát triển hoặc duy trì. Các tài liệu vẫn ở đây cho đến thời điểm hiện tại (để tham khảo) cho đến khi một plugin mẫu thay thế phù hợp đã sẵn sàng.

Phần II: Bước tiếp theo

Các lộ trình mới dường như nhằm mục đích cho một bộ mới của plugin, JSRender (không phụ thuộc vào DOM và thậm chí JQuery công cụ rendering mẫu) và JSViews đó có một số dữ liệu thoải mái ràng buộc và quan sát / quan sát mô hình thực hiện

Đây là bài viết về chủ đề này

http://www.borismoore.com/2011/10/jquery-temsheet-and-jsview-roadmap.html

Và đây là nguồn mới nhất

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

Các nguồn lực khác

• Một bài thuyết trình hay về chủ đề http://www.sl slideshoware.net/BorisMoore/jsview-next-generation-jquery-temsheet

• Trình diễn hoạt động: http://borismoore.github.com/jsview/demos/index.html

Lưu ý rằng nó vẫn chưa ở phiên bản beta và chỉ là một mục bản đồ đường, nhưng có vẻ như là một ứng cử viên tốt để trở thành tiện ích mở rộng JQuery / JQueryUI chính thức cho các mẫu và liên kết UI

Chỉ là kẻ ngốc ^^

// 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/ ;)

Đây không phải là jsquery cụ thể, nhưng đây là một thư viện tạo khuôn mẫu dựa trên JS được phát hành bởi google dưới dạng nguồn mở:

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

Điều này cho phép sử dụng các phần tử DOM làm mẫu và được cấp lại (trong đó đầu ra của kết xuất mẫu vẫn là một mẫu có thể được kết xuất lại với một mô hình dữ liệu khác).

Những người khác đã chỉ jquery-tmpl, và tôi đã nêu lên những câu trả lời. Nhưng hãy chắc chắn để có một cái nhìn vào dĩa github.

Có những sửa chữa quan trọng ngoài kia và các tính năng thú vị quá. http://github.com/jquery/jquery-tmpl/network

John Resig có một cái mà anh ấy đã đăng trên blog của mình. http://ejohn.org/blog/javascript-micro-templating/

Nếu bạn đang làm việc trong .NET Framework 2.0 / 3.5, bạn nên xem JBST như được triển khai bởi http://JsonFx.net . Nó có một giải pháp tạo khuôn mẫu phía máy khách có cú pháp JSP / ASP quen thuộc nhưng được biên dịch trước tại thời điểm xây dựng cho các mẫu có khả năng lưu trữ bộ đệm nhỏ gọn mà không cần phải phân tích cú pháp khi chạy. Nó hoạt động tốt với jQuery và các thư viện JavaScript khác vì bản thân các mẫu được biên dịch thành JavaScript thuần.

Tôi đã sử dụng jtemsheet jquery pluging nhưng hiệu suất thực sự rất tệ. Tôi đã chuyển sang trimpath ( http://code.google.com.vn/p/taleighath/wiki/JavaScriptTemsheet ) có hiệu suất tốt hơn nhiều. Tôi chưa nhận thấy bất kỳ vấn đề nào với IE7 hoặc FF.

Đối với công việc rất nhẹ, jquery-tmpl là đủ, nhưng trong một số trường hợp, dữ liệu phải biết cách định dạng chính nó (điều xấu!).

Nếu bạn đang tìm kiếm một plugin tạo khuôn mẫu đầy đủ tính năng hơn, tôi sẽ đề xuất Orange-J . Nó được lấy cảm hứng từ Freemarker. Nó hỗ trợ if, other, vòng lặp trên các đối tượng & mảng, javascript nội tuyến, bao gồm các mẫu trong các mẫu và có các tùy chọn định dạng tuyệt vời cho đầu ra (maxlen, wordboundary, htmlentity, v.v.).

Oh, và cú pháp dễ dàng.

Bạn có thể muốn nghĩ một chút về cách bạn muốn thiết kế mẫu của bạn.

Một vấn đề với nhiều giải pháp mẫu được liệt kê (jQote, jquery-tmpl, jTem mẫu) là chúng yêu cầu bạn chèn non-HTML vào HTML, điều này có thể gây khó khăn khi làm việc với các công cụ HTML hoặc trong quá trình phát triển với các nhà thiết kế HTML . Cá nhân tôi không thích cảm giác của phương pháp đó, mặc dù nó có ưu và nhược điểm.

Có một lớp tiếp cận mẫu khác sử dụng HTML thông thường, nhưng cho phép bạn chỉ ra các ràng buộc dữ liệu với các thuộc tính phần tử, các lớp CSS hoặc ánh xạ bên ngoài.

Knockout là một ví dụ điển hình cho phương pháp này, nhưng tôi đã không sử dụng nó cho bản thân mình nên tôi để nó để bỏ phiếu để quyết định xem người khác có thích hay không. Ít nhất cho đến khi tôi có thời gian để chơi với nó nhiều hơn.

PURE được liệt kê như một câu trả lời khác là một ví dụ khác của phương pháp này.

Để tham khảo, bạn cũng có thể xem chain.js , nhưng dường như nó không được cập nhật nhiều kể từ khi phát hành ban đầu. Để biết thêm thông tin về nó, hãy xem http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .

Dropbox sử dụng công cụ mẫu của John Resig trên trang web. Họ đã sửa đổi một chút, bạn có thể kiểm tra tệp js này của dropbox. Tìm kiếm trong tệp này cho tmpl và bạn sẽ mã của công cụ mẫu.

Cảm ơn. Hy vọng nó sẽ hữu ích cho một ai đó.

Tôi hiện đang sử dụng khung tạo khuôn mẫu đa HTML. Khung này giúp việc nhập dữ liệu templated trong DOM của bạn dễ dàng hơn rất nhiều. Ngoài ra mô hình MVC tuyệt vời.

http://www.enfusion-framework.org/ (xem các mẫu!)

Ngoài ra còn có một bản viết lại của PURE bằng beebole - các mẫu html thuần túy của jquery - https://github.com/mpapis/jquery-pure-temsheet

Nó sẽ cho phép kết xuất tự động nhiều hơn chủ yếu bằng cách sử dụng các bộ chọn jquery, điều quan trọng hơn là nó không yêu cầu đưa những thứ ưa thích vào HTML.