Mustache.js + jQuery：最簡單的工作示例是什麼？

我想用用jQuery mustache.js在我的HTML5應用程序，但我不能讓所有的組件協同工作。每個文件都找到了，這裏沒有問題（模板加載了roght，我可以在Firebug調試器中看到它的值）。Mustache.js + jQuery：最簡單的工作示例是什麼？

這裏是我的index.html：

<!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>

這裏是我的app.js文件：

$(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); 
    }); 
});

的jquery.mustache.js文件是一個從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);

注意到顯示。螢火告訴我

鬍子沒有定義

請參閱捕獲： enter image description here

我知道缺少了什麼，但我不能告訴。

謝謝。

編輯：正確和完整的回答到最小例子如下：

寫劇本模板，不從文件中加載它
同上爲JSON數據
讀jQuery的是如何產生和使用$.mustache.to_html函數代替（在案githu B）Mustache.to_html（感謝@mikez302）
重構「直到你放棄

 
$(document).ready(function() { 
    var template = " ... {{title}} ... "; 
    var json = {title: "titre article" } 
    var article = $.mustache(template, json); 
    $("#content").append(article); 
});

但是，它很容易從另一個文件中讀取JSON：

 
$(document).ready(function() { 
    var template = " ... {{title}} ... "; 
    $.getJSON('../js/article.json', function(view) { 
    var article = $.mustache(template, view); 
    $("#content").append(article); 
    }); 
});

你終於可以還閱讀來自文件的模板：

 
$(document).ready(function() { 
    $.getJSON('../js/article.json', function(view) { 
    $.get("../templates/article.mustache", function(template) { 
     var article = $.mustache(template, view); 
     $("#content").append(article); 
    }); 
    }); 
});

工作示例（無l oading順序問題）：

 
$(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); 
    }); 
}

來源

2011-06-22 Jean-Philippe Caruana

我會把所有的JavaScript **放在**內容後面。 [LINK]（http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/） – Sparky

感謝您的提示。我現在不在尋找優化，我螞蟻讓我的代碼工作 –

我發佈它作爲評論，而不是答案。當然，您在其中加載腳本的**命令**也包括_also_，以使代碼正常工作。如果你是JavaScript的初學者，這個信息是一個關鍵的'必讀'。所有初學者都知道他們需要加載jQuery _before_他們加載jQueryUI或任何其他jQuery插件？ – Sparky

在地方的Mustache.to_html，嘗試$.mustache。它看起來像Mustache變量是在函數中定義的，所以它不能直接在其外部訪問。

來源

2011-06-22 17:31:26

我知道這個問題已經被AHS回答，但是我寫了一篇關於正是這個話題的博客文章，我想我會在這裏分享，讓任何人尋找如何使用鬍鬚用jQuery可能會看到這樣的例子。

http://blog.xoundboy.com/?p=535

來源

2011-10-30 21:24:27 Xoundboy

幾年之後，很可能會有人期待，但我想讓你知道你的博客鏈接已經死了。 – Prefix

@Prefix非常感謝您的支持，我只是從您那裏閱讀這條評論，對於延遲感到抱歉。無論如何它現在都在備份:) – Xoundboy

Mustache.js + jQuery：最簡單的工作示例是什麼？

回答

相關問題