Tôi muốn sử dụng mustache.js với jQuery trong ứng dụng HTML5 của mình, nhưng tôi không thể làm cho tất cả thành phần hoạt động cùng nhau. Mỗi tập tin được tìm thấy, không có vấn đề ở đây (mẫu được nạp roght, tôi có thể thấy giá trị của nó trong trình gỡ lỗi Firebug).Mustache.js + jQuery: ví dụ làm việc tối thiểu là gì?
Đây là index.html của tôi:
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="utf-8"></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="../js/jquery.mustache.js"></script>
<script src="../js/app.js"></script>
<div id="content"></div>
</body>
</html>
Đây là app.js tập tin của tôi:
$(document).ready(function() {
var template = $.get('../templates/article.mustache');
$.getJSON('../js/article.json', function(view) {
var html = Mustache.to_html(template, view);
$("#content").append(html);
});
});
File jquery.mustache.js là một tạo ra từ https://github.com/janl/mustache.js:
/*
Shameless port of a shameless port
@defunkt => @janl => @aq
See http://github.com/defunkt/mustache for more info.
*/
;(function($) {
// <snip> mustache.js code
$.mustache = function(template, view, partials) {
return Mustache.to_html(template, view, partials);
};
})(jQuery);
Thông báo được hiển thị. Firebug nói với tôi
Moustache không được định nghĩa
Xem chụp: 
tôi biết điều gì đó là mất tích, nhưng tôi không thể nói gì.
Cảm ơn.
EDIT: Câu trả lời đúng và đầy đủ để một tối thiểu ví dụ như sau:
- viết mẫu trong kịch bản, không tải nó từ một tập tin
- idem cho dữ liệu json
- đọc cách tạo jQuery và sử dụng hàm
$.mustache.to_htmlthay vì (được ghi trên githu b)Mustache.to_html(nhờ @mikez302) - Refactor 'cho đến khi bạn thả
$(document).ready(function() {
var template = " ... {{title}} ... ";
var json = {title: "titre article" }
var article = $.mustache(template, json);
$("#content").append(article);
});
Nhưng, nó rất dễ dàng để đọc các json từ tập tin khác:
$(document).ready(function() {
var template = " ... {{title}} ... ";
$.getJSON('../js/article.json', function(view) {
var article = $.mustache(template, view);
$("#content").append(article);
});
});
Bạn cuối cùng cũng có thể đọc mẫu từ một tệp:
$(document).ready(function() {
$.getJSON('../js/article.json', function(view) {
$.get("../templates/article.mustache", function(template) {
var article = $.mustache(template, view);
$("#content").append(article);
});
});
});
Ví dụ làm việc (không có l oading order problems):
$(document).ready(function() {
$.getJSON('../js/article.json', function(model) { return onJSON(model); });
});
function onJSON(model) {
$.get("../templates/article.mustache", function(view) {
var article = $.mustache(view, model);
$("#content").append(article);
});
}
Tôi sẽ đặt tất cả JavaScript ** sau ** nội dung. [LINK] (http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/) – Sparky
cảm ơn mẹo. Tôi không tìm kiếm tối ưu hóa ngay bây giờ, tôi kiến để làm cho mã của tôi làm việc –
Tôi đăng nó như một bình luận và không phải là một câu trả lời. Tất nhiên, thứ tự ** trong đó bạn tải kịch bản của bạn bao gồm _also_ vấn đề để làm cho mã làm việc. Nếu bạn là người mới bắt đầu với JavaScript, thông tin này là một yếu tố quan trọng 'phải đọc'. Tất cả những người mới bắt đầu đều biết họ cần tải jQuery _before_ họ tải jQueryUI hoặc bất kỳ plugin jQuery nào khác không? – Sparky