Giter VIP home page Giter VIP logo

knockback's Introduction

Build Status

logo

Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.

Why Knockback?

  • Make amazingly dynamic applications by applying a small number of simple principles
  • Leverage the wonderful work from both the Backbone and Knockout communities
  • Easily view and edit relationships between Models using an ORM of your choice:
  • Simplify program control flow by configuring your application from your HTML Views. It's like Angular.js but without memorizing all of the special purpose ng-{something} attributes. See the Inject Tutorial for live examples!

Examples

Simple

The HTML:
<label>First Name: </label><input data-bind="value: first_name, valueUpdate: 'keyup'" />
<label>Last Name: </label><input data-bind="value: last_name, valueUpdate: 'keyup'" />
And...engage:
model = new Backbone.Model({first_name: 'Bob', last_name: 'Smith'})
ko.applyBindings(kb.viewModel(model))

When you type in the input boxes, the values are properly transferred bi-directionally to the model and all other bound view models!

Advanced

The View Model:

Javascript

var ContactViewModel = kb.ViewModel.extend({
  constructor: function(model) {
    kb.ViewModel.prototype.constructor.call(this, model);

    this.full_name = ko.computed(function() {
      return this.first_name() + " " + this.last_name();
    }, this);
});

or Coffeescript

class ContactViewModel extends kb.ViewModel
  constructor: (model) ->
    super model

    @full_name = ko.computed => "#{@first_name()} #{@last_name()}"
The HTML:
<h1 data-bind="text: 'Hello ' + full_name()"></h1>
<label>First Name: </label><input data-bind="value: first_name, valueUpdate: 'keyup'" />
<label>Last Name: </label><input data-bind="value: last_name, valueUpdate: 'keyup'" />
And...engage:
model = new Backbone.Model({first_name: 'Bob', last_name: 'Smith'})
view_model = new ContactViewModel(model)
ko.applyBindings(view_model)

# ... do stuff then clean up
kb.release(view_model)

Now, the greeting updates as you type!

Getting Started

Download Latest (1.2.3):

Please see the release notes for upgrade pointers.

The full versions bundle advanced features.

The core versions remove advanced features that can be included separately: localization, formatting, triggering, defaults, and validation.

The stack versions provide Underscore.js + Backbone.js + Knockout.js + Knockback.js in a single file.

###Distributions

You can also find Knockback on your favorite distributions:

  • npm: npm install knockback
  • Bower: bower install knockback
  • NuGet - install right in Visual Studio

###Dependencies

  • Backbone.js - provides the Model layer
  • Knockout.js - provides the ViewModel layer foundations for Knockback
  • Underscore.js - provides an awesome JavaScript utility belt
  • LoDash - optionally replaces Underscore.js with a library optimized for consistent performance
  • Parse - optionally replaces Backbone.js and Underscore.js

###Compatible Components

  • BackboneORM - A polystore ORM for Node.js and the browser
  • Backbone-Relational.js - Get and set relations (one-to-one, one-to-many, many-to-one) for Backbone models
  • Backbone Associations - Create object hierarchies with Backbone models. Respond to hierarchy changes using regular Backbone events
  • BackboneModelRef.js - provides a reference to a Backbone.Model that can be bound to your view before the model is loaded from the server (along with relevant load state notifications).

Contributing

To build the library for Node.js and browsers:

$ gulp build

Please run tests before submitting a pull request:

$ gulp test --quick

and eventually all tests:

$ npm test

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.