Allows to easily separate business logic in your application from the View and Data-Access layers. Not dependend on any 3rd party library, fully customisable.
Async apps often retrieve data, modify and and then render in given place. This happens frequently. As your app grows, you may end up with business logic mixed up with the view layer logic, rendering process and much more. This is an answer to these problems.
- Component
- Built-in Modular Repository System (any can be injected)
- Renderer (any can be injected)
Define your repository system and rendering engine:
DC.Component.setup({
repository : DC.Repository,
renderer : nunjucks
});First, define your repository class with custom constructor
DC.Repository.create('profiles', function () {
// Setup properties that will be used later on by finder methods
this.endpoint = 'https://site.com/api/profiles';
});Second, define custom finder methods, this is where business logic sits. You can manipulate data however you want
DC.Repository.addFinder('profiles/recent', function (done) {
// You don't have to use jQuery, this is just an example
$.getJSON(this.endpoint + '?recent=true').success(function (data) {
// Manipulate data
// Pass back manipulated data to the callback function
done(data);
});
});Components are the glue between retrieved data from repositories and rendering engine.
DC.Component.render('profiles/recent', function (compiled) {
// You can do whatever you want with the compiled template,
// e.g. append it using jQuery to a given DOM Node
$('.profiles').append(compiled);
});// 1. Setup the library to use it's own repository and given rendering engine
DC.Component.setup({
repository : DC.Repository,
renderer : nunjucks
});
// 2. Setup Repository with custom finders (business logic)
DC.Repository.create('profiles', function () {
this.endpoint = 'https://site.com/api/profiles';
});
DC.Repository.addFinder('profiles/recent', function (done) {
$.getJSON(this.endpoint + '?recent=true').success(function (data) {
done(data);
});
});
// 3. Render Component and append to the dom tree
DC.Component.render('profiles/recent', function (compiled) {
$('.profiles').append(compiled);
});Component.render('profiles/recent' function (compiled) { /* ... */ });
- Retrieves data using new
<RepositoryClass>.Profilesobject with.find('recent', cb)method - Once done, calls rendering engine, e.g.
<RendererObject>.render('profiles/recent', data')with retrieved data - Passes back
compiledtemplate to the callback
Feel free to contribute or contact me at [email protected] with any questions