🐶
Bark
Strictly for learning purposes, implementing a simple MVC framework. Super naive implementation of the MVC pattern, inspired by Backbone!
Why Bark?
Cause it will be a little ruff around the edges. And when developers look at the code they will say woof.
Installation
Browser
Download bark.js
from the src
folder in this repo and include it on your page.
In your HTML
<script src="js/bark.js"></script>
In your JS
const model = Bark.Model({...});
npm
npm install --save bark-framework
const Bark = require('bark-framework');
Browser Support
At this time the support is only for browsers that support fetch
.
API
Bark.Model()
A Bark Model is a simple constructor that is used to store your data, this can be as a simple model or a collection.
Each Bark Model has a fetch method that is used to fetch the data from a url
property that you assign when you create a new model.
Usage:
const studentData = Bark.Model({
url: 'http://myapi.com/students'
});
studentData.fetch()
.then(() => {
console.log(studentData.attrs.stundent[0]);
});
- url:
url
used for fetching data. - attrs: property the data is stored on
- fetch(): default method for fetching data, applies data to the
attrs
property. Returns a Promise.
Bark.Template
A simple tagged template function that will take an ES6 Template Literal and return a new function that you can apply your Bark.Model too.
let studentTemplate = Bark.Template`
<h2>${'name'}</h2>
<img src="${'photo'}" alt="" />`;
Pass a Template literal with strings inside of the expressions, these strings will map to keys in the object you want to pass to it.
{
name: 'Ryan Christian',
photo: 'http://coolheadshot.com/rchristiani.png'
}
When calling it later it you pass this data to the returned function from Bark.Template
.
studentTemplate({
name: 'Ryan Christian',
photo: 'http://coolheadshot.com/rchristiani.png'
});
This will produce your new template!
You may also use functions inside of your expressions to get more complex templates. Consider some data like this.
{
name: 'Ryan Christian',
photo: 'http://coolheadshot.com/rchristiani.png'
projects: ['Built Facebook','Made new cool startup']
}
We could represent this data in our template like such.
let studentTemplate = Bark.Template`
<h2>${'name'}</h2>
<img src="${'photo'}" alt="" />
<ul>
${data => data.projects.map(el => `<li>${el}</li>`)}
</ul>`
;
Bark.View()
A Bark View is used to create a reusable view.
Bark.View({
template: studentTemplate({
name: 'Ryan Christian',
photo: 'http://coolheadshot.com/rchristiani.png'
}),
className: 'student',
elem: document.querySelector('#app')
}).render();
The view comes with a few options.
template
A Bark.Template
to be used to render the data in the view. No Default.
elem
This property will take a DOM element to be used to append your view too. Defaults to the body
.
elemType
This property will define what element type to warp your template in.
className
What you want to add as a class to the view. Defaults to nothing.
render()
This method is used to render the view on the elem
.
Bark.Controller()
A Bark Controller is used to control the views and models. Very much a work in progress.
Options available.
model
Used to store a Bark.Model
on.
init()
This method is called when the controller is created. Use this as a place to initialize your application.
TODO
- Allow templates to take array data.