Last active
December 21, 2015 01:28
-
-
Save simonblee/6227441 to your computer and use it in GitHub Desktop.
Marionette with Dust templates example. Save `package.json` and `index.html` into the same directory. Run `npm install` and then open `index.html`. First the dust template is compiled, then a view is created which uses the compiled template, then the view is rendered and attached to the body DOM element. In production, it's recommended to pre-co…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Marionette Dust Example</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
| <script type="text/javascript" src="node_modules/lodash/lodash.js"></script> | |
| <script type="text/javascript" src="node_modules/backbone/backbone.js"></script> | |
| <script type="text/javascript" src="node_modules/backbone.marionette/lib/backbone.marionette.js"></script> | |
| <script type="text/javascript" src="node_modules/dustjs-linkedin/dist/dust-full-2.0.2.js"></script> | |
| <script type="text/javascript" src="node_modules/backbone.marionette.dust/src/backbone.marionette.dust.js"></script> | |
| <!-- A template --> | |
| <script id="templateName" type="text/x-dust-template"> | |
| <h3>{heading}</h3> | |
| <p>{content}</p> | |
| <a href="{url}">A link</a> | |
| </script> | |
| <script type="text/javascript"> | |
| jQuery(function ($) { | |
| // Compile all dust templates found in script tags on the page. | |
| // Templates names are set as script tag's id | |
| $('script[type="text/x-dust-template"]').each(function () { | |
| var compiled = dust.compile($(this).html(), $(this).attr('id')); | |
| dust.loadSource(compiled); | |
| }); | |
| // Create a view and render it | |
| var SomeView = Backbone.Marionette.ItemView.extend({ | |
| template: 'templateName', | |
| templateHelpers: { | |
| heading: 'My Awesome Heading', | |
| content: 'My awesome content', | |
| url: 'http://example.com' | |
| } | |
| }), | |
| myView = new SomeView; | |
| $('body').append(myView.render().$el); | |
| }); | |
| </script> | |
| </head> | |
| <body></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "marionette-dust-example", | |
| "version": "0.0.1", | |
| "description": "Example showing how to use Backbone, Marionette and Dust.", | |
| "dependencies": { | |
| "backbone": "1.0.0", | |
| "backbone.marionette": "1.0.4", | |
| "lodash": "1.3.1", | |
| "dustjs-linkedin": "2.0.2", | |
| "backbone.marionette.dust": "0.1.6" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment