StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHandelbars.js: rendered HTML code not displayed
primarykey
Id
19998950
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-11-15T10:31:18.057
FavoriteCount
0
LastActivityDate
2014-08-03T06:22:49.897
LastEditDate
2014-08-03T06:22:49.897
LastEditorUserId
759866
OwnerUserId
2028517
ParentId
0
PostTypeId
1
Score
0
ViewCount
174
LastEditorDisplayName
text
Body
<p>I new to Handelbars.js and I wanted to test it out. I just have one html file, whose content I want to be rendered by handlebars.js:</p> <p>HTML file:</p> <pre><code><html> <head> <script type="text/javascript"> console.log("Head:getting css"); </script> <link rel="stylesheet" type="text/css" href="css/main_2.css"> </head> <body> <div class="phone-screen"> <script type="text/javascript"> console.log("Body:start MasterPage"); </script>  <script id="app-bar" type="text/x-handlebars-template"> <div class="app-bar-container"> </div> <div class="nav-bar-container"> <div class="nav-tab-left nav-tab-selected nav-tab-label-Selected"> <div class="tab-lable-centered ">History</div> </div> <div class="nav-tab-right nav-tab-notSelected "> <div class="tab-lable-centered ">New</div> </div> </div> </script  <script id="workout-list-tpl" type="text/x-handlebars-template"> <div class="list-container"> <div class="week-seperator"> <div class="week-lable-right ">Week 12</div> </div> <div class="workout-card-white"> <div class="workout-card-label ">Workout</div> </div> </script> <script type="text/javascript"> console.log("Body:getting Scripts________________________"); </script> <script src="lib/handlebars.js"></script> <script src="js/storage/memory-store.js"></script> <script src="lib/jquery-1.8.2.min.js"></script> <script src="js/MainView.js"></script>  <script src="js/main_2.js"></script> </div> </body> </code></pre> <p></p> <p>The app javascript:</p> <pre><code>var app = { initialize: function() { console.log("initializer start: "); var self = this; //this.detailsURL = /^#employees\/(\d{1,})/; //this.registerEvents(); this.store = new MemoryStore(function() { self.route(); }); }, route: function() { console.log("route function start."); var self = this; var hash = window.location.hash; if (!hash) { if (this.homePage) { //this.slidePage(this.homePage); } else { console.log("homePage: "); this.homePage = new MainView(this.store).render(); console.log("homePage = " + this.homePage ); //this.slidePage(this.homePage); } return; } var match = hash.match(this.detailsURL); if (match) { //this.store.findById(Number(match[1]), function(employee) { //self.slidePage(new EmployeeView(employee).render()); //}); } }, showAlert: function (message, title) { if (navigator.notification) { navigator.notification.alert(message, null, title, 'OK'); } else { alert(title ? (title + ": " + message) : message); } }, }; console.log("app.initialize();"); app.initialize(); </code></pre> <p>And the view.js:</p> <pre><code>var MainView = function(store) { this.render = function() { console.log("render function execution:" + MainView.template() ); this.el.html(MainView.template()); return this; }; this.initialize = function() { console.log("MainView init start."); // Define a div wrapper for the view. The div wrapper is used to attach events. this.el = $('<div/>'); //this.el.on('keyup', '.search-key', this.findByName); }; this.initialize(); } console.log("Handlebars.compile($(app-bar).html()); " ); MainView.template = Handlebars.compile($("#app-bar").html()); </code></pre> <p>console log:</p> <pre><code>Head:getting css main_2.html:4 Body:start MasterPage main_2.html:12 Body:getting Scripts________________________ main_2.html:41 Handlebars.compile($(app-bar).html()); MainView.js:19 app.initialize(); main_2.js:46 initializer start: main_2.js:5 route function start. main_2.js:15 homePage: main_2.js:22 MainView init start. MainView.js:10 render function execution: <div class="app-bar-container"> </div> <div class="nav-bar-container"> <div class="nav-tab-left nav-tab-selected nav-tab-label-Selected"> <div class="tab-lable-centered ">History</div> </div> <div class="nav-tab-right nav-tab-notSelected "> <div class="tab-lable-centered ">New</div> </div> </div> MainView.js:4 homePage = [object Object] </code></pre> <p>The code goes through to the render function in view.js getting the html code but I do not know what happens next and hence why it is not rendered in the browser.</p>
Tags
<javascript><html><handlebars.js>
Title
Handelbars.js: rendered HTML code not displayed
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USBenjamin
UserOwnerUserId
1. USSnafuBernd
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. COwhat is displayed in the console?
  singulars
  PostPostId
  POHandelbars.js: rendered HTML code not displayed
  UserUserId
  USamdixon
2. COadded console log in post, sry for that...
  singulars
  PostPostId
  POHandelbars.js: rendered HTML code not displayed
  UserUserId
  USSnafuBernd

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.