25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 3.6KB

16 년 전
16 년 전
16 년 전
16 년 전
16 년 전
16 년 전
16 년 전
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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 = {name: "Joe"}
  44. var template = "Welcome, {{jow}}! {{<winnings}}"
  45. var winnings = {value: 1000,
  46. taxed_value: function() {
  47. return this.value - (this.value * 0.4);
  48. }
  49. }
  50. var winnings_template = "You just won ${{value}} (which is ${{taxed_value}} after tax)"
  51. var output = Mustache.to_html(template, view)
  52. output will be:
  53. Welcome, Joe! You just won $1000 (which is $600 after tax)
  54. You invoke a partial with `{{<name}}`. When `name` is an object, mustache.js will look for a JavaScript object called `name_template` and uses this for the template and `name` for the view. If `name` is a simple string, mustache.js will simply render the strings context like a normal template.
  55. ## Escaping
  56. 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}}}`.
  57. 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`.
  58. ## More Examples and Documentation
  59. See `examples/` for more goodies and read the [original mustache docs][m]
  60. [m]: http://github.com/defunkt/mustache/
  61. [node.js]: http://nodejs.org
  62. [couchdb]: http://couchdb.apache.org