Last active
August 29, 2015 13:56
-
-
Save Fauntleroy/9140974 to your computer and use it in GitHub Desktop.
"Modular" self-rendering module example
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> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script> | |
| <script src="../universe-experiment.js"></script> | |
| <script id="module-template" type="script/template"> | |
| <ul> | |
| {{#events}} | |
| <li> | |
| <h3>{{title}}</h3> | |
| <p>{{description}}</p> | |
| <time>{{date}}</time> | |
| </li> | |
| {{/events}} | |
| </ul> | |
| </script> | |
| <script> | |
| var KEY = '85fb2147-06bb-4923-9589-34b186a3899c'; | |
| var module_template_text = document.getElementById('module-template').innerText; | |
| var module_template = Handlebars.compile( module_template_text ); | |
| var module = new Modular({ | |
| el: '.module', | |
| url: 'http://services.sparkart.net/api/v1/events?key='+ KEY, | |
| template: module_template, | |
| preprocessor: function( data ){ | |
| data.title = 'Date & Time:'; | |
| return data; | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="module"></div> | |
| </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
| var NO_OP = function(){}; | |
| var domready = require('domready'); | |
| var sizzle = require('sizzle'); | |
| var elClass = require('element-class'); | |
| var jsonp = require('jsonp'); | |
| var xhr = require('xhr'); | |
| var Modular = function( config ){ | |
| this.url = config.url; | |
| this.el = config.el; | |
| this.template = config.template; | |
| this.preprocessor = config.preprocessor; | |
| domready( function(){ | |
| if( typeof this.el === 'string' ){ | |
| this.el = sizzle( this.el )[0]; | |
| } | |
| this.request(); | |
| }.bind( this ) ); | |
| }; | |
| Modular.prototype.request = function( callback ){ | |
| callback = callback || NO_OP; | |
| elClass( this.el ).add('loading'); | |
| xhr({ | |
| uri: this.url, | |
| cors: true | |
| }, function( err, request, response ){ | |
| var data = JSON.parse( response ); | |
| console.log( 'data', data ); | |
| elClass( this.el ).remove('loading'); | |
| if( this.preprocessor ) data = this.preprocessor( data ); | |
| this.el.innerHTML = this.template( data ); | |
| }.bind( this ) ); | |
| // jsonp( this.url, function( err, data ){ | |
| // elClass( this.el ).remove('loading'); | |
| // if( err ) elClass( this.el ).add('error'); | |
| // if( this.preprocessor ) data = this.preprocessor( data ); | |
| // this.el.innerHTML = this.template( data ); | |
| // }.bind( this ) ); | |
| }; | |
| module.exports = Modular; |
@pushred I'm playing around with the idea of not bundling it. This allows us to pass in templates with our helpers attached. Or, in a wider sense, it allows any template that can be boiled down to a function to be used. Since hbsfy just gives you back your compiled templates as functions, it would sure be a convenient feature to have.
The other approach is to just make the handlebars object available on the Modular object for replacement/modification.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How come handlebars isn't required?