A JavaScript MVC framework for scalable One-Page-Application using YUI
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.




Make your YUI apps rock!


  • Easy Data Binding
  • ModelList Rendering
  • Region Rendering
  • Event Enhancements
  • Handlebars Default
  • YUI Best Practices

Getting Started

####Require RocketJS Rocket.JS is already pushed to YUI Gallery, so you can use YUI CDN to get Rocket.JS

// Put the YUI seed file on your page.
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>

// Create a YUI sandbox on your page.
YUI().use('gallery-rocket', function(Y)
    // The Rocket.JS modules are loaded and ready to use.
    // Your code goes here!

####Hello Rocket Rocket is aimed to build complex applications but it's easy to get started. Template is handlebars.JS by default.

var view = new Y.RView({
  template: 'Hello {{beauty}}',
  beauty: 'Rocket'


####Model Binding By default every property of your view is automatically available in the template. If a model is bound its attributes will also be made available.

var model = new Y.RModel({
  beauty: 'Rocket'

var view = new RView({
  model: model,
  love: 'hello',
  template: '{{love}} {{beauty}}',

####List rendering Easily render list with the ListView. Thorax will make sure that your view stays current as models in your modelList are added, removed or updated.

var models = new Y.ModelList({
  items: [
    {firstName: 'Brendan', lastName: 'Eich'},
    {firstName: 'Yukihiro', lastName: 'Matsumoto'},
    {firstName: 'Paul', lastName: 'Graham'}

var view = new Y.RView({
  template: "{{firstName}} - {{lastName}}"

var view = new Y.RListView({
  itemView: view,
  modelList: models

will generate HTML:

  <li>Brendan - Eich</li>
  <li>Yukihiro - Matsumoto</li>
  <li>Paul - Graham</li>

####Layout rendering


<div id='main'></div>
<div id='footer'></div>


var layout = new Y.RLayout({
  regions: {
    main: '#main',
    footer: '#footer'

var mainView1 = new Y.RView();
var mainView2 = new Y.RView();
var footerView = new Y.RView();

layout.footer.show(footerView);  // show footerView under <div id='footer'>
layout.main.show(mainView1);  // show mainView1 under <div id='main'>
layout.main.show(mainView2);  // close mainView1 and show mainView2 under <div id='main'>

Modules List

  • Y.Rocket: An application object that starts your app via initializers, routes and more.
  • Y.RController: A general purpose object for controlling modules, routers, view, and implementing a mediator pattern.
  • Y.RModel: Create modules and sub-modules within the application.
  • Views and related modules
    • Y.RView: Base View that can render.
    • Y.RListView: A view that iterates over a modelList, and renders individual ItemView instances for each model.
    • Y.RLayout: A view that can map DOMs to different regions, and manage lifecycle of the view in the region.
    • Y.RRegion: A managable area related to a DOM.
    • Y.RRegionManager: Manager of Y.RRegion, used by Y.RLayout.
  • Y.REventBroker: Enhance event managment, add stopListening, listenTo and more.