https://github.com/bfollington/pillar
An extension layer built on Backbone, developed alongside personal projects
https://github.com/bfollington/pillar
backbone do-not-use retired
Last synced: about 1 year ago
JSON representation
An extension layer built on Backbone, developed alongside personal projects
- Host: GitHub
- URL: https://github.com/bfollington/pillar
- Owner: bfollington
- License: mit
- Created: 2015-01-27T05:55:57.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-02-28T07:32:58.000Z (over 11 years ago)
- Last Synced: 2025-02-07T20:30:55.914Z (over 1 year ago)
- Topics: backbone, do-not-use, retired
- Language: JavaScript
- Size: 203 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pillar
An extension layer built on Backbone.js, `pillar` provides extended functionality for handling views and templating.
## Views
The primary function of pillar is to enable full extension of views, normally in backbone extending a view does not merge the events of the subclass with the superclass. Nor do the initialize functions stack.
```javascript
Pillar.BaseTestView = Pillar.View.extend({
init: function(opts)
{
console.log("Base INIT");
},
events: {
"click": "helloWorld"
},
helloWorld: function(e)
{
console.log("Hello World");
}
});
Pillar.TestView = Pillar.BaseTestView.extend({
init: function(opts)
{
// implicit super.init(opts);
console.log("INIT");
},
events: { // inherits "click": "helloWorld"
"click .all": "whatUp"
},
whatUp: function(e)
{
console.log("What Up!");
}
});
Pillar.ExtendedTestView = Pillar.TestView.extend({
init: function(opts)
{
// implicit super.super.init(opts);
// implicit super.init(opts);
console.log("Child INIT");
}
// inherits events: {
// "click": "helloWorld",
// "click .all": "whatUp"
//},
});
```
`Pillar.ExtendedTestView` has the events: `{"click": "helloWorld", "click .all": "whatUp"}`, and when it is initialized "Base INIT", "INIT" and "Child INIT" will print, in that order.
To accomplish view extension, pillar expects you to use `init` and `draw` to extend, rather than `initialize` and `render`.
To override this behaviour, `initialize` and `render` can also be overridden to allow full customisation.
### Collection Views
Pillar provides `CollectionView`s which allow simple management of subviews.
## Templating
Pillar allows a declarative syntax for populating your html templates.
```html
```
Rendering this using `{id: 123, link: "http://google.com", title: "Google"}`, gives:
```html
```
Templates support JSON Objects or actual Backbone models being passed. You can bind either attributes on the model object, or methods. Providing `{ id: function() { return Math.random(); } }` will actually evaluate the id function on render.
The templating system is drop-in, and I tend to use it as so:
```javascript
//Global
Pillar.Templates.register("my_template", $("#my_template").html());
// In the view
template: Pillar.Templates.get("my_template"),
draw: function(opts)
{
var html = this.renderTemplate(this.template, this.model);
this.replaceElement(html);
}
```
## Dependencies
Pillar depends on `jquery`, `backbone` and `underscore`.