brite
Version:
DOM Centric Minimalistic MVC Framework
210 lines (167 loc) • 5.51 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>briteUITest - View events</title>
<!-- ****** Generic Test Includes ****** -->
<link rel="stylesheet" href="css/test.css"/>
<link rel="stylesheet" href="../others/bootstrap/css/bootstrap.css" />
<!-- only brite.js dependency -->
<script type="text/javascript" src="../js-dependencies/jquery.js" ></script>
<!-- include the brite.min.js in prod -->
<script type="text/javascript" src="../dist/brite.js" ></script>
<!-- some test utilities -->
<script type="text/javascript" src="../others/handlebars.min.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<!-- ****** /Generic Test Includes ****** -->
<script type="text/javascript" src="../extra/brite.InMemoryDaoHandler.js" ></script>
<style type="text/css">
body{
padding: 20px;
}
.action{
color: #5588bb;
cursor: pointer;
}
.userList{
margin: 0;
width: 100%;
}
.userList li{
list-style: none;
margin-bottom: 3px;
border: solid 1px #aaaaaa;
padding: 3px 5px;
}
.userList li .name{
display: inline-block;
margin-right: 10px;
}
.del{
font-weight: normal;
font-family: courier;
font-size: 14px;
float: right;
cursor: pointer;
color: #555555;
}
.UserListView{
}
.UserListView h2{
font-size: 14px;
font-weight: bold;
color: #999;
line-height: normal;
letter-spacing: .2em;
padding: 5px;
margin: 0;
border: none;
}
</style>
<!-- Registering the DAO -->
<script type="text/javascript">
var usersSeed = [{id:"001",name:"Mike Donavan",city:"San Francisco"},
{id:"002",name:"Jennifer Patrick",city:"Los Angeles"}];
var userDao = brite.registerDao(new brite.InMemoryDaoHandler("User",usersSeed));
</script>
<!-- The UserListView Component -->
<script type="text/javascript">
(function($){
brite.registerView("UserListView",{
create: function(){
var html = "<div class='UserListView span3'><h2>UserListView<span class='del'>x</span></h2><ul class='userList'></ul></div>";
return $(html);
},
postDisplay: function(){
refreshList.call(this);
},
events: {
"btap; li .del": onTapUserDel,
"btap; h2 .del": onTapViewDel
},
daoEvents: {
"dataChange; User; create" : function(event){
refreshList.call(this);
},
"dataChange; User; delete" : function(event){
refreshList.call(this);
},
"result; User; list" : "logOnResultList"
// Note: could have been just "dataChange; User" or "dataChange" to take care of both case
},
logOnResultList: function(event){
var view = this;
console.log("'onResult; list; User' has been triggered " + event.daoEvent.action + " view.id: " + view.id);
}
});
function onTapUserDel(event){
var view = this;
var entity = $(event.currentTarget).bEntity("User");
brite.dao("User").delete(entity.id);
}
function onTapViewDel(){
var view = this;
view.$el.fadeOut(function(){
view.$el.bRemove();
});
}
// private refresh list
function refreshList(){
var view = this;
userDao.list().done(function(userList){
var user, i,
$userList =view.$el.find(".userList");
//clean the list
$userList.empty();
for (i = 0; i < userList.length; i++) {
user = userList[i];
$li = $("<li></li>");
$li.attr("data-entity", "User");
$li.attr("data-entity-id", user.id);
//Note: The 'name' and 'city' class are just for css layout
// The 'del' class is use for delegate
$li.append("<span class='name'>" + user.name + "</span>" +
"<span class='del'>x</span>" );
$userList.append($li);
}
});
}
})(jQuery);
$(document).ready(function(){
brite.display("UserListView","#userListViewsContainer");
brite.display("UserListView","#userListViewsContainer");
});
</script>
</head>
<body>
<div class="sTestSection">
<h2>View events</h2>
<div>
<h3>Create new User</h3>
<div>User Name: <input id="userNameIpt" type="text" /> <button class="btn btn-primary" id="userCreateBut">Create</button></div>
<!-- when click on create -->
<script type="text/javascript">
$(document).ready(function(){
var $but = $("#userCreateBut");
var $inputName = $("#userNameIpt");
$inputName.on("keyup",function(event){
if (event.which === 13){
$but.trigger("click");
}
});
// create the user
$but.on("click",function(){
userDao.create({name: $("#userNameIpt").val(),
city: $("#userCityIpt").val()});
//clean the input and focus
$inputName.val("").focus();
});
});
</script>
<h3>UserList Views</h3>
<div id="userListViewsContainer" class="row-fluid">
</div>
</div>
</div>
</body>
</html>