BackboneJS Starter using ES6 classes. This app uses backbone to parse readme file from this project complete with Syntax highlighting.
npm install
npm build
npm install
npm start
All development files should go under src. The base structure is:
- src/
-- collections/ # Backbone Collections.
-- lib/ # Misc scripts.
-- models/ # Backbone Models.
-- scss/ # Styles.
-- views/ # Backbone Views.
-- index.html # Main SPA view.
-- main.js # Main JavaScript file imported by index.html.
-- routes.js # Route Map.
The src/main.js is the main file that the entire build is based off of.
The only command you should need during development is npm start. This will:
1. Clean the `dist` folder.
2. Run webpack dev server.
3. Start a webserver, enable live-reload, serve `dist` and open it in your browser.
Only one route in this one. Its pretty straight forward. A route needs to be defined in super to be called on itself with a new view declared.
import Backbone from 'backbone';
import BaseView from './views/baseView';
export default class Router extends Backbone.Router {
constructor() {
super({
routes: {
'': 'home' }
});
}
initialize() {
console.log('App.router.initialize()');
Backbone.history.start();
}
home () {
new BaseView();
}
}import Backbone from 'backbone';
import showdown from 'showdown';
import Git from '../models/git';
export default class Gits extends Backbone.Collection {
constructor() {
super();
}
initialize() {
console.log('App.Collection.Gits()');
}
url(){
return 'https://raw.githubusercontent.com/kurtisdunn/backbonejs-es6-classes-starter/master/README.md';
}
parse(response){
const models =[];
if(response){
const converter = new showdown.Converter();
models.push({ md: converter.makeHtml(response) });
}
return models;
}
}import Backbone from 'backbone';
import _ from 'underscore';
import $ from 'jquery';
import hljs from 'highlightjs/highlight.pack.js';
import Gits from '../collections/gits';
export default class BaseView extends Backbone.View {
constructor() {
super({
el: document.getElementById('main'),
events: {
'click .btn': 'clickButton',
}
});
}
initialize() {
console.log('App.Views.BaseView()');
this.fetchReadme();
}
fetchReadme(){
const that = this;
const gits = new Gits();
gits.fetch({
dataType: 'html',
success: function(i) {
that.renderPage(i.models[0].attributes.md).then(that.syntaxHighlighter());
},
error: function(i) {
const error = new Error();
error(i);
}
});
}
renderPage(data){
const that = this;
return new Promise(function(resolve, reject) {
that.renderReadme(data);
});
}
renderReadme(md){
return document.getElementById('readme').innerHTML = md.toString();
}
syntaxHighlighter(){
hljs.configure({useBR: false});
$('code.language-js').each(function(i, block) {
hljs.highlightBlock(block);
});
}
clickButton(e){
console.log('button clicked!', e);
}
}