|
<%= post.attr('created_at') %>
|
<%= post.attr('author') %>
|
...
We are iterating on our posts array to create a table row for each of them.
You will not see any post yet because you haven't loaded the post from your server (JSON).
To do that, just update your ApplicationController by adding your Post model in the models array :
var models = [Post];
ChocoUtils.loadModels(models, function() {
app.run('#/main');
});
All your models will be loaded by calling the load() method on their class.
This action will send Ajax requests to your server.
The Choco application will then be launched when all the responses have been received and treated.
To create, remove & update posts, you have to create your REST controller on the server side.
Have a look at the sample demo for an example (http://github.com/ahe/choco_demo).
You can also use fixtures instead. Fixtures are located in the /fixtures folder, they use the jquery.mockjax plugin to mock Ajax requests and return the JSON you defined in your fixtures.
Use the choco generate fixture command to easily create your fixtures (e.g : $ choco generate fixture post, will mock requests sent to the /posts URL).
= Generators
The following code generators are available :
* $ choco generate controller
* $ choco generate model
* $ choco generate scaffold [field1 field2 ...]
* $ choco generate scaffold
* $ choco generate fixture
* $ choco generate layout
* $ choco generate plugin
Don't forget to start the choco --watch command before executing any generator. Otherwise you'll have to update manually your Jimfile, bundled.js & application_controller.js.
= Controllers
To learn more about controllers, please read Sammy documentation : http://code.quirkey.com/sammy
You may be wondering about the best solution to execute Javascript code after rendering a template.
Let's say we want to add a specific behavior to one of our link, in the app/views/posts/index.template view, I add this simple link :
Hey, click me, I'm a simple test!
I want to open a Javascript alert when it is clicked.
I can simply update my controller like this :
get('#/posts', function(cx) {
cx.posts = Post.all();
cx.render({ template: 'posts/index', event: 'posts_loaded', data: { size: cx.posts.length }});
});
bind('posts_loaded', function(e, data) {
$('#test_link').click(function() {
alert('Hey! We have ' + data['size'] + ' posts!');
return false;
});
});
I call the render() method explicitly because I want to trigger an event when the template is rendered.
This event is named 'posts_loaded' and when it is executed it simply add a Javascript behavior to my link.
The render method supports various options like like layouts, events & more.
You can read the doc here : http://github.com/ahe/choco.libs/blob/master/plugins/sammy/choco.plugins.sammy.smart_renderer.js
= Views
By default, Choco uses simple template views where you can combine HTML and Javascript.
You can easily display values in your views :
<%= post.attr('title') %>
Or call helpers you defined :
<% myHelper(); %> // Don't forget the ;
You can also of course use conditions, iterators & more.
You can easily switch to HAML or Mustache by configuring it in your application controller.
Have a look at Sammy documentation for more information.
To create a DELETE link, just use the following attributes :
Delete
= Models
For more information about models, please read js-model documentation : http://github.com/benpickles/js-model
js-model stores all the data locally. You can persist your models to the server using methods like save() but don't forget to implement your REST controller on the server side.
Have a look at the demo for an example : http://github.com/ahe/choco_demo
js-model expects JSON without the ROOT element included. In Rails that means you have to disable this option :
ActiveRecord::Base.include_root_in_json = false
= Logger
You can call the logger from anywhere in your application by simply calling :
app.logger('hello choco!');
= Plugins
Models, views & controllers can easily be extended using plugins.
You can generate a new plugin using the following command :
$ choco generate plugin
Existing plugins & Choco libs are stored here : http://github.com/ahe/choco.libs
= Deploy
When you deploy your application on live, don't forget to compress your files :
$ rake choco:deploy
Then just copy the required files on your web server.
= BDD
BDD is currently being implemented, it will be soon very easy to test all the parts of your Choco apps.
A first solution can be found here : http://github.com/ahe/sammy_demo/tree/master/test/javascript
= Mailing list
http://groups.google.com/group/choco-js
= Note on Patches/Pull Requests
* Fork the project.
* Make your feature addition or bug fix.
* Add tests for it. This is important so I don't break it in a
future version unintentionally.
* Commit, do not mess with rakefile, version, or history.
(if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
* Send me a pull request. Bonus points for topic branches.
= Copyright
Copyright (c) 2010 Anthony Heukmes. See LICENSE for details.
* http://2dconcept.com
* http://intotheweb.be
* http://twitter.com/2dc
* http://twitter.com/intotheweb