Created
July 17, 2012 13:17
-
-
Save alanning/3129349 to your computer and use it in GitHub Desktop.
YUI App Framework Hello World Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script> | |
</head> | |
<body class="yui3-skin-sam"> | |
<div id="app"></div> | |
<script> | |
YUI({ | |
filter: 'raw', combine: false | |
}).use('app', //'handlebars', 'cssbutton', | |
function (Y) { | |
// Creates a HelloView which can say hello to someone named, or to the World | |
// if a name is not specified. | |
Y.HelloView = Y.Base.create('helloView', Y.View, [], { | |
render: function () { | |
var name = this.get('name'); | |
this.get('container').set('text', 'Hello ' + (name || 'World') + '!'); | |
return this; | |
} | |
}); | |
// Creates a new App instance and registers the HelloView. | |
var app = new Y.App({ | |
serverRouting: false, | |
views: { | |
hello: {type: 'HelloView'} | |
} | |
}); | |
// Adds a route handler for "/" to show the HelloView. | |
app.route('/', function (req) { | |
// Sets the `activeView` to a new instance of a `Y.HelloView` by just | |
// passing "hello", the name of the registered view. | |
this.showView('hello'); | |
}); | |
// Adds a route handler for "/:name" to show the HelloView with a `name`. | |
app.route('/:name', function (req) { | |
// The name which we want to say hello to is specified on `req.params`. | |
var name = req.params.name; | |
// Sets the `activeView` to a new instance of a `Y.HelloView`, but here | |
// we are also passing a config object which the new view instance will | |
// be constructed with, and it contains the name which we'll say hello to. | |
this.showView('hello', {name: name}); | |
}); | |
// Renders the app, then saves a new history entry for "/eric" which will | |
// dispatch the "/:name" route handler. | |
app.render().save('/eric'); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment