Teddy allows you to dynamically inject views into html elements in the simplest way.
Teddy was originally developed for fullpage.js to allow dynamic loading of views. However it absolutely has a lot of use cases where teddy will become handy. Feel free to contribute to the project.
The following example aims to demonstrate the brief idea of teddy. For working examples, follow the working examples session.
<div class="welcome"></div>
<div id="footer"></div>
<!-- import Jquery -->
<script src="jquery.js"></script>
<!-- import teddy.js -->
<script src="teddy.js"></script>
<script>
ted({
sections: {
'.welcome': 'templates/welcome.html',
'#footer': 'templates/footer.html'
},
done: function(){
alert('done loading all the templates');
}
});
</script>
The above code will populate .welcome
and #footer
with the content in templates/welcome.html
and templates/footer.html
respectively.
git clone https://github.com/ycmjason/teddy.js.git
cd teddy.js
npm start
(note: this requires python to be installed)- Open your browser and go to localhost:8001
- Navigate to the examples folders and see the examples.
See the fullpage.js example in the examples
directory.
MIT