a small extension of Backbone.js that unlocks Angular-like programming experience
TypeScript HTML JavaScript Other
Permalink
Failed to load latest commit information.
custom-typings
demo
dist
doc
src
tests
typings
.gitignore
.jscsrc
.jshintrc
.travis.yml
CHANGELOG.md
README.md
bower.json
demo-backbone-typings.json
demo-exoskeleton-typings.json
index.d.ts
index.html
karma-demo.conf.js
karma.conf.js
ng-backbone.png
package.json
tsconfig.json
tslint.json
typings.json
update.sh

README.md

ngBackbone 1.0

NPM

Build Status Join the chat at https://gitter.im/dsheiko/ng-backbone

ngBackbone is a framework on top of Backbone.js that unlocks Angular2-like programming experience

Well, I love old good Backbone for its simplicity and flexibility. However after working with such frameworks as Angular and React, I see that Backbone app requires much more code. Yet I don't want to ditch Backbone and deal with some 20K LOC framework codebase. I just want a minimal modular extension that will improve my programming experience and maintainability of my code. And that is how I came up with ngBackbone

Read ngBackbone.Book

Motivation

What does it do?

ngBackbone extends the base with:

  • @Component decorator encapsulates declarative from imperative part of the view
  • View module binds specified models/collections to the view template (makes the template reacting on data events)
  • FormView creates state models for controls per a specified group and binds them to input/change event. FormView keeps these models in sync with element ValidityState and can run custom validators on input events.

Ng.Backbone does not depend on jQuery or Underscore, meaning you can use on an optimized build of Backbone. For example, my preferred build consists of Exoskeleton (Backbone decoupled from Underscore), Backbone.NativeView (Backbone View decoupled from jQuery) and Backbone.Fetch (Backbone.sync leveraging Feth API instead of XHR) Though Ng.Backbone works fine with canonical Backbone bundle (Backbone + jQuery + Underscore)

What does it look like?

import { Component, FormView } from "backbone-ng";
import { HeroPowers } from "./Collection/HeroPowers";

@Component({
  el: "ng-hero",
  events: {
    "submit form": "onSubmitForm"
  },
  collections: {
    powers: new HeroPowers()
  },
  template: `
    <form data-ng-group="hero">
      <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" type="text" class="form-control" required >
        <div class="alert alert-danger" data-ng-if="hero.name.valueMissing">
          Name is required
        </div>
      </div>
      <div class="form-group">
        <label for="power">Hero Power</label>
        <select id="power" name="power" class="form-control">
          <option data-ng-for="let aPower of powers" data-ng-text="aPower.name" >Nothing here</option>
        </select>
        <div class="alert alert-danger" data-ng-if="hero.power.dirty && !hero.power.valid">
          Power is required
        </div>
      </div>
       <button type="submit" class="btn btn-default" data-ng-prop="'disabled', !hero.group.valid">Submit</button>
    </form>
`
})

export class HeroView extends FormView {

  initialize() {
    this.collections.get( "powers" ).fetch();
  }

  onSubmitForm( e:Event ){
    e.preventDefault();
    alert( "Form submitted" )
  }

}

See more

How to

Contributing

ngBackbone welcomes maintainers. There is plenty of work to do. No big commitment required, if all you do is review a single Pull Request, you are a maintainer.

How to set up

npm install

How to run tests

npm run test