Comments (8)
Sorry, but I don't know. Didn't use backbone at all yet)) If you'll do this or find the example - tell me please, I'm interesting in it too
from gon.
Hi @netwire88 , I know it's kind late but if you still need that, I can help.
from gon.
Hello, @hzyh64160! Maybe if you can write some instructions or example for it - it will be great and I'll put it in wiki
from gon.
Hi @gazay I will be more than happy to write some examples about this! I will do it this weekend and post it here.
from gon.
@hzyh64160 thank you!
from gon.
Correct me if I said anything inappropriate :)
Using Gon + RABL + Backbone.js
Why
Backbone.js relieved rails' controller by rending templates in javascript. Rails then become more backend oriented providing data interface in JSON.
RABL enables the user to format JSON easily.
Gon is an elegant preload data solution in this combination. It saves an ajax call by preloading the data into the page(you don't have to get data from backbone model/collection any more in most cases).
Work flow
Original:
- HTTP request => 2. Rails routes => 3. Rails controller logic code and render the view => 4. trigger backbone => 5. Render backbone template and send ajax call to get data -> 6. Update html code generated by template when ajax returns data
Using gon.rabl
- HTTP request => 2. Rails routes => 3. Rails controller logic code, render the view, and generates json according to rabl template => 4. Trigger backbone => 5. Render template directly with gon data
Preloading data into pages will save a request with server and quicken the page load processing.
Example
pages_controller.rb
def show
@user = User.find(params[:id])
gon.rabl
end
show.json.rabl
@object user
attributes :username, :gender
node(:followers_count) { |user| user.followers.count } # Just an example here, it's better to have a count filed in model
sample_router.coffee
class Sample.Routers.SampleRouter extends Backbone.Router
routes:
"users/:id/show" : "showUser"
showUser: ->
user = new Sample.Models.User(gon.user)
userView = new Sample.Views.User(model: user)
$("body").html(userView.render().el)
Warning
Rabl allows you to exclude the root by setting.
# config.include_json_root = false
config.include_child_root = false
Here I just disabled the child root because if you disabled the json root, everything you put to Gon will be like
gon.username = "john doe"; gon.gender = "male"...
instead of
gon.user = { username: "john doe", gender: "male" }
from gon.
I really enjoyed this combination and hope this can be helpful.
from gon.
Thank you! Already added to wiki https://github.com/gazay/gon/wiki/Usage-gon.rabl-with-Backbone.js
from gon.
Related Issues (20)
- use from engine HOT 2
- Gon variable "undefined" when nested in a format.js statement
- Any thoughts on ways to make gon play nicely with webpacker? HOT 4
- gon.watch not update variable in different browser windows.
- Write to localstorage
- How to use Base64.urlsafe_decode64 for a gon variable.
- json.cache! is not working when using gon.jbuilder HOT 1
- Is there a way to update gon through a remote call (JS)? HOT 1
- How to use CSP `nonce` option with Rails 5.2? HOT 3
- A new version possible? HOT 2
- NoMethodError: undefined method `create' for ActionDispatch::TestRequest:Class with rails 4
- Problem gon navigate with turbolinks HOT 2
- Is there a way to set gon variables with a proc? HOT 1
- Option to print variables one per line HOT 2
- Cannot access Rails view helpers methods when using with JBuilder HOT 1
- test failure with rails 6 - Gon#include_gon outputs correct js with a script string
- undefined variable include_gon HOT 1
- Array attribute types incorrectly rendered with Jbuilder using key_format! option
- Why do my objects only contain ID strings after transmitting via gon? HOT 2
- ArgumentError - tried to create Proc object without a block
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gon.