JS UI framework for complex UIs.
Currently need to bower install from local repo
git clone https://github.com/twitter/plumage.js.git
cd [my-js-project]
bower install plumagejs=../plumage.js
Someday it might be possible to bower install plumagejs, but not yet.
Add script tags for require.js, config.js (config for require.js) to your index.html
<script type="text/javascript" src="/bower_components/plumagejs/assets/scripts/vendor/require.js"></script>
<script type="text/javascript" src="/bower_components/plumagejs/assets/scripts/config.js"></script>
<!-- include your own require.js config here -->
In your js files, require plumage, and access plumage classes from the Plumage object.
define(['jquery', 'underscore', 'plumage'],
function($, _, Plumage) {
return Plumage.model.Model.extend({
urlRoot: '/mymodel'
});
});
To get running, we'll need an App, a Router and a Controller.
controller/MyController.js
define(['jquery', 'underscore', 'plumage'],
function($, _, Plumage, ) {
return Plumage.controller.BaseController.extend({
sayHello: function() {
alert('Hello Plumage!');
}
});
});
MyRouter.js
define(['jquery', 'underscore', 'plumage'],
function($, _, Plumage, ) {
return Plumage.Router.extend({
controllerRoutes: {
'': {controller: 'MyController', method: 'sayHello'},
}
});
});
application.js
define(['jquery', 'underscore', 'plumage', 'MyRouter', 'controller/MyController'],
function($, _, Plumage, MyRouter) {
myApp = new Plumage.App({
initCSRFToken: true,
controllers: [
'MyController'
]
});
window.router = new MyRouter({app: myApp});
return myApp;
});
Then require your application in your index.html and you're good to go.
<script type="text/javascript">require(['application']);</script>
Load the page and you should see the 'Hello Plumage!' alert.
Next you'll probably want some Models, Collections and Views. A good place to start is the source code of the Countries example.
Copyright 2014 Twitter, Inc. and other contributors
Licensed under the MIT License