You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

16 年之前
16 年之前
16 年之前
16 年之前
16 年之前
16 年之前
16 年之前
16 年之前
16 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. # mustache.js
  2. > What could be more logical awesome than no logic at all?
  3. Shamless port of http://github.com/defunkt/mustache
  4. by Jan Lehnardt <jan@apache.org>.
  5. Thanks @defunkt for the awesome code.
  6. ## Where to use?
  7. You can use mustache.js rendering stuff in various scenarios. E.g. you can render templates in your browser, or rendering server-side stuff with [node.js][node.js], use it for rendering stuff in [CouchDB][couchdb]'s views.
  8. ## Usage
  9. A quick example how to use mustache.js:
  10. var view = {
  11. title: "Joe",
  12. calc: function() {
  13. return 2 + 4;
  14. }
  15. }
  16. var template = "{{title}} spends {{calc}}";
  17. var html = Mustache.to_html(template, view);
  18. `template` is a simple string with mustache tags and `view` is a JavaScript object containing the.
  19. ## Template Tag Types
  20. There are several types of tags currently implemented in mustache.js.
  21. ### Simple Tags
  22. Tags are always surrounded by mustaches like this `{{foobar}}`.
  23. var view = {name: "Joe", say_hello: function(){ return "hello" }}
  24. template = "{{say_hello}}, {{name}}"
  25. ### Conditional Sections
  26. Conditional sections begin with `{{#condition}}` and end with `{{/condition}}`. When `condition` evaluates to true, the section is rendered, otherwise the hole block will output nothing at all. `condition` may be a function returning true/false or a simple boolean.
  27. var view = {condition: function() {
  28. // [...your code goes here...]
  29. return true;
  30. }}
  31. {{#condition}}
  32. I will be visible if condition is true
  33. {{/condition}}
  34. ### Enumerable Sections
  35. Enumerable Sections use the same syntax as condition sections do. `{{#shopping_items}}` and `{{/shopping_items}}`. Actually the view decides how mustache.js renders the section. If the view returns an array, it will iterator over the items. Use `{{.}}` to access the current item inside the enumeration section.
  36. var view = {name: "Joe's shopping card",
  37. items: ["bananas", "apples"]}
  38. var template = "{{name}}: <ul> {{#items}}<li>{{.}}</li>{{/items}} </ul>"
  39. Outputs:
  40. Joe's shopping card: <ul><li>bananas</li><li>apples</li></ul>
  41. ### View Partials
  42. mustache.js supports a quite powerful but yet simple view partial mechanism. Use the following syntax for partials: `{{<partial_name}}`
  43. var view = {
  44. name: "Joe",
  45. winnings: {
  46. value: 1000,
  47. taxed_value: function() {
  48. return this.value - (this.value * 0.4);
  49. }
  50. }
  51. };
  52. var template = "Welcome, {{jow}}! {{<winnings}}"
  53. var partials = {winnings: "You just won ${{value}} (which is ${{taxed_value}} after tax)"};
  54. var output = Mustache.to_html(template, view, partials)
  55. output will be:
  56. Welcome, Joe! You just won $1000 (which is $600 after tax)
  57. You invoke a partial with `{{<name}}`. Invoking the partial `name` will tell
  58. mustache.js to look for a object in the context's property `name`. It will then
  59. use that object as the context for the template found in `partials` for `name`.
  60. ## Escaping
  61. mustache.js does escape all values when using the standard double mustache syntax. Characters which will be escaped: `& \ " < >`. To disable escaping, simply use tripple mustaches like `{{{unescaped_variable}}}`.
  62. Example: Using `{{variable}}` inside a template for `5 > 2` will result in `5 &gt; 2`, where as the usage of `{{{variable}}}` will result in `5 > 2`.
  63. ## More Examples and Documentation
  64. See `examples/` for more goodies and read the [original mustache docs][m]
  65. [m]: http://github.com/defunkt/mustache/#readme
  66. [node.js]: http://nodejs.org
  67. [couchdb]: http://couchdb.apache.org