Giter VIP home page Giter VIP logo

railsy_backbone's Introduction

railsy_backbone

Gem Version Build Status

A clone of codebrew/backbone-rails with updated Backbone, Underscore, and jquery-rails versions.

Provides Backbone & Underscore files and modifies Backbone to:

  • include the Rails authenticity token in HTTP requests
  • nest model attributes within the declared   paramRoot  , EG,
var Book = Backbone.Model.extend({ 
  url: '/books',
  paramRoot: 'book'
});

var book_instance = new Book({ 
  title:  'the illiad', 
  author: 'homer'
});

book_instance.sync();

This will cause the resulting HTTP POST to be,

Started POST "/books" for 127.0.0.1 ...
  Processing by BooksController#create as JSON
  Parameters: { "book" => {  "title" => "the illiad",  "author" => "homer", "id" => 1 } }

Example App

https://github.com/westonplatter/example_railsy_backbone

Branches

master

  • Backbone 1.1.0
  • Underscore 1.5.2

1-0-stable

  • Backbone 1.0.0
  • Underscore 1.5.1

Rails Setup

Install

Add this line to Gemfile,

gem 'railsy_backbone'

And then,

$ bundle install
$ rails g backbone:install

This requires Backbone, Underscore, and the Backbone modifications to implement the Rails authenticity token and nesting model attributes in the paramsRoot (see Javscript files with the railsy_backbone. prefix for details).

These will be added to your app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require railsy_backbone.sync
//= require railsy_backbone.datalink
//= require backbone/<your_rails_application_name>
//= require_tree .

Generators

Backbone Model $ rails g backbone:model
Backbone Router $ rails g backbone:router
Backbone Scaffold $ rails g backbone:scaffold

Example Usage

Create new rails app,

rails new library
cd library

Install railsy_backbone,

# add railsy_backbone to Gemfile
bundle install
rails g backbone:install

Generate a standard Rails scaffold,

rails g scaffold Book title:string author:string
rake db:migrate

Generate a Backbone scaffold,

rails g backbone:scaffold Book title:string author:string

Edit books/index.html to execute actions through the Backbone scaffold UI rather than routing to different pages.

If you're using ERB, index.html.erb

<div id="books"></div>

<script type="text/javascript">
  $(function() {
    window.router = new Library.Routers.BooksRouter({books: <%= @books.to_json.html_safe -%>});
    Backbone.history.start();
  });
</script>

Or HAML, index.html.haml

#books

:javascript
  $(function() {
    window.router = new Library.Routers.BooksRouter({books: #{@books.to_json.html_safe}});
    Backbone.history.start();
  });

If you're using the default Rails 4 scaffold generators, you'll need to adjust the default JSON show view (IE, show.json) to render the id attribute.

# BROKEN -- default rails generated show.json.jbuilder
json.extract! @book, :title, :author, :created_at, :updated_at

# FIXED --- after adding `id`
json.extract! @book, :id, :title, :author, :created_at, :updated_at

Without adjusting the JSON show view, you will be redirected to a "undefined" url after creating an object.

Docs

Link to the docs.

I value clear communication (I'm serious!). If you think something is missing in the docs, please open a GitHub issue (create issues here), and I'd love to add it if it makes sense.

Contributors

These awesome people infused their awesome talent in this project.

Credits

Inspired by and copied from Ryan Fitzgerald's codebrew/backbone-rails.

License

See LICENSE

Bitdeli Badge

railsy_backbone's People

Contributors

westonplatter avatar bitdeli-chef avatar soberstadt avatar

Watchers

James Cloos avatar  avatar

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.