YUI().use("app", function(Y){
// create model(s)
Y.Page = Y.Base.create("page", Y.Model, [],{},{
ATTRS: {
pagename: {},
content: {},
other: {}
}
});
// create view(s)
Y.PageView = Y.Base.create("pageView", Y.View, [], {
render: function(){
var page = this.get("model");
var name = page.get("pagename");
var content = page.get("content");
var other = page.get("other");
this.get("container").setContent("<div class='page "+name+"'><div>Name: "+ name+"</div>"+ unescape(content)+"<div><button>Change to "+other+"</button></div>");
return this;
},
events: {
button: {
click: "goPage"
}
},
goPage: function(){
//Y.log(this.get("model").get("pagename"));
var mod = this.get("model");
var my = mod.get("pagename")
var other = mod.get("other");
var date = new Date();
app.save("/"+other+"/"+other+"/"+date.toLocaleTimeString()+"/"+my);
}
});
// create the app
var app = new Y.App({
views: {
one: {
type: "PageView"
},
two: {
type: "PageView"
}
}
});
// Adds a route handler for "/" to show the HelloView.
app.route('/', function(req) {
this.showView('one');
});
app.route('/one/:pagename/:content/:other', function(req){
this.showView('one', {
model: new Y.Page(req.params)
});
});
app.route('/two/:pagename/:content/:other', function(req){
this.showView('two', {
model: new Y.Page(req.params)
});
});
app.render();
app.save("/one/one/hi there/two");
})
Following resources are loaded into result:
- yui-min.js
/** YUI App framework demo - simple swap views **/
/** references http://stage.yuilibrary.com/yui/docs/app/app-contributors.html **/
/** http://jsfiddle.net/triptych/4jD97/ **/
.page {
background-color: slategrey;
padding: 32px;
}
.one {
border: 1px solid green;
color: white;
}
.two {
border: 2px solid brown;
color: blue;
}
.page div {
font-weight: bold;
}