brite
Version:
DOM Centric Minimalistic MVC Framework
112 lines (82 loc) • 3.42 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>briteUITest - brite</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 ****** -->
<!-- Simple HelloWorld Component -->
<script type="text/javascript">
var helloWorlCount = 0;
brite.registerComponent("helloWorld",
{
// Tell to empty the parent before adding the output of built element
emptyParent: true
},
{// Build the component $element
create: function(data){
this.hellowWorldCount = ++helloWorlCount;
console.log("helloWorld#" + this.hellowWorldCount + " create");
var $e = $("<div><strong>Hello " + data.name + "</strong></div>");
// just to keep track of the number of display
$e.find("strong").append(" " + this.hellowWorldCount );
//return the element to have brite managing the rendering logic
return $e;
// Not recommended, but if return null, then, this build function is responsible of the display logic
// (i.e. need to add itself to the appropriate HTMLElement)
//
},
init: function(data,config){
console.log("helloWorld#" + this.hellowWorldCount + " init");
},
// The postDisplay will be called after the display
postDisplay: function(data,config){
console.log("helloWorld#" + this.hellowWorldCount + " postDisplay");
this.$element.click(function(){
alert("You clicked on " + $(this).html());
});
},
destroy: function(){
console.log("helloWorld#" + this.hellowWorldCount + " destroy");
},
postDestroy: function(){
console.log("helloWorld#" + this.hellowWorldCount + " postDestroy");
}
}
);
</script>
<!-- /Simple HelloWorld Component -->
</head>
<body>
<h2>brite Hello World</h2>
<h3>Hello World</h3>
<button id="helloButton">Display Hello World</button>
<div id="HelloWorld-Container" style="margin: 30px;border: solid 1px #dddddd;height: 30px">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#helloButton").click(function(){
brite.display("helloWorld","#HelloWorld-Container",{name:"Mike"});
});
});
</script>
<h3>View without parent<h3>
<div id="message" class="msg">
</div>
<script type="text/javascript">
$(document).ready(function(){
// brite.js should console an error saying that this parent doesnot exist.
brite.display("helloWorld","#Unknown-container-test",{name:"Mike"});
});
</script>
</body>
</html>