Handlebars not rendering?
Question
I've been following this tutorial in order to develop a chat system to my Laravel application, but some things seem outdated and I'm really new into Handlebars and JS. On step " Creating an interface ", I've tried to adapt the code provided in the tutorial to the syntax required in Handlebars 3.0 but everything I get is a blank page. Looks like the Handlebars views are not rendering at all and I'm probably stuck in some very basic issue. Here are my codes.
chat.blade.php
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
type="text/css"
href="{{ asset("css/bootstrap.css") }}"
/>
<link
rel="stylesheet"
type="text/css"
href="{{ asset("css/bootstrap.theme.css") }}"
/>
<title>Laravel 4 Chat</title>
</head>
<body>
<script type="text/x-handlebars-template">
@{{outlet}}
</script>
<script
type="text/x-handlebars-template"
data-template-name="chat"
id='chat'
>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Laravel 4 Chat</h1>
<table class="table table-striped">
@{{#each}}
<tr>
<td>
@{{user}}
</td>
<td>
@{{text}}
</td>
</tr>
@{{/each}}
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input
type="text"
class="form-control"
/>
<span class="input-group-btn">
<button class="btn btn-default">
Send
</button>
</span>
</div>
</div>
</div>
</div>
</script>
<script
type="text/javascript"
src="{{ asset("js/shared.js") }}"
></script>
<script
type="text/javascript"
src="{{ asset("js/jquery-1.11.2.min.js") }}"
></script>
<script
type="text/javascript"
src="{{ asset("js/handlebars-v3.0.0.js") }}"
></script>
<script
type="text/javascript"
src="{{ asset("js/handlebars.runtime-v3.0.0.js") }}"
></script>
<script
type="text/javascript"
src="{{ asset("js/ember.debug.js") }}"
></script>
<script
type="text/javascript"
src="{{ asset("js/ember-data.js") }}"
></script>
<script
type="text/javascript"
src="{{ asset("js/bootstrap.js") }}"
></script>
<script type="text/javascript">
$(document).ready( function() {
var source = $("#chat").html();
var template = Handlebars.compile(source);
});
</script>
</body>
</html>
shared.js:
// 1
var App = Ember.Application.create();
// 2
App.Router.map(function() {
this.resource("chat", {
"path" : "/chat/"
});
});
// 3
App.Message = DS.Model.extend({
"user" : DS.attr("string"),
"text" : DS.attr("string")
});
// 4
App.ApplicationAdapter = DS.FixtureAdapter.extend();
// 5
App.Message.FIXTURES = [
{
"id" : 1,
"user" : "Chris",
"text" : "Hello World."
},
{
"id" : 2,
"user" : "Wayne",
"text" : "Don't dig it, man."
},
{
"id" : 3,
"user" : "Chris",
"text" : "Meh."
}
];
Thanks in advance!
1 answers
solution1
0 2015-04-05 21:12:13
I think ember is not supporting handlebars (hdbs) 3.0 at the moment.
Please have a look at this post for a handlebars update info . Not sure if this is up-to-date, but it seems that only hdbs 1.x is supported.
Because Ember has changed to HTMLBars, see this post for infos to the change. They probably won't add support for hdbs 3.0.
There is also a jsbin where you can see how to use the latest version of emberJS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.