Last active
December 20, 2015 11:09
-
-
Save rchrand/6121180 to your computer and use it in GitHub Desktop.
Handlebars Problem
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> | |
<title>Rettiwt</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<link rel="stylesheet" type="text/css" href="css/stylecss.css"> | |
</head> | |
<body> | |
<h1>Rettiwit</h1> | |
<div id="content"> | |
<h3>Welcome, please write a message!</h3> | |
<div class="header"> | |
<input type="text" name="message_head" placeholder="Title" id="ctnHeader" required> </input> | |
<textarea rows="2" cols="65" placeholder="Your message here!" id="ctnText" required></textarea> | |
<br \> | |
<button type="button" id="btnSubmit">Send!</button> | |
</div> | |
<div id="mainBody"> | |
<div class="message"> | |
<script id="tm" type="text/x-handlebars-template"> | |
{{#each message}} | |
<div id="msg-header"> {{header}} </div> | |
<div id="msg-body"> {{body}} </div> | |
<div id="msg-header"> {{footer}} </div> | |
<div class="subMsgMenu"> | |
<button class="btnDelete" name="deleteButton">Delete</button> | |
<button class="btnShare" name="shareButton">Share</button> | |
</div> | |
{{/each}} | |
</script> | |
</div> | |
</div> <!-- mainBody closer --> | |
</div> | |
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
<script type="text/javascript" src=js/handlebars.js"></script> | |
<script type="text/javascript" src="js/main.js"></script> | |
</body> | |
</html> |
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
$(function() { | |
var data = {message : []}; | |
$("#btnSubmit").click(function (){ | |
console.log("onClick from btnSubmit"); | |
createMessage(); | |
var subMenu = $(".subMsgMenu"); | |
$(".message").css("display", "none"); | |
subMenu.on("mouseover", function(){ $(this).css("display", "''"); }); | |
subMenu.on("mouseout", function(){ $(this).css("display", "none"); }); | |
$(".btnDelete").click(function() { | |
var subMenus = this.parentNode; | |
var realTarget = subMenus.parentNode; | |
$(realTarget).remove(); | |
}); | |
console.log("I've come beyond subMenu's"); | |
var source = $("#tm").html(); | |
var template = Handlebars.compile(source); | |
$(".message").html(template(data)); | |
console.log("I've come beyond handlebars"); | |
}); | |
function createMessage(){ | |
var ctnHeader, ctnMessage; | |
var date = new Date(); | |
ctnHeader = document.getElementById("ctnHeader").value; // I get the value instead of the element | |
ctnMessage = document.getElementById("ctnText").value; | |
data.message.push({header : ctnHeader, body : ctnMessage, footer : date.toString()}); | |
console.log("Data: " + data.message); | |
}}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment