I'm trying to pick up emberJS with the blog tutorial https://www.youtube.com/watch?v=1QHrlFlaXdI#t=56 and ember-app-kit. What changes does EAK make that are preventing me from rendering things with handlebars?
I didn't clear app.js like in the screencast. my app.js file
import Resolver from 'resolver';
var App = Ember.Application.extend({
LOG_ACTIVE_GENERATION: true,
LOG_MODULE_RESOLVER: true,
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true,
LOG_VIEW_LOOKUPS: true,
modulePrefix: 'appkit', // TODO: loaded via config
Resolver: Resolver['default']
});
Ember.RSVP.configure('onerror', function(error) {
// ensure unhandled promises raise awareness.
// may result in false negatives, but visibility is more important
if (error instanceof Error) {
Ember.Logger.assert(false, error);
Ember.Logger.error(error.stack);
}
});
export default App;
my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- build:css(tmp/result) /assets/app.min.css -->
<link rel="stylesheet" href="/assets/app.css">
<link rel="stylesheet" href="/vendor/bootstrap/dist/css/bootstrap.css">
<!-- endbuild -->
<!-- for more details visit: https://github.com/yeoman/grunt-usemin -->
<!-- build:js(tmp/result) /assets/config.min.js -->
<script src="/config/environment.js"></script>
<!-- @if tests=false -->
<!-- @if dist=false -->
<script src="/config/environments/development.js"></script>
<!-- @endif --><!-- @if dist=true -->
<script src="/config/environments/production.js"></script>
<!-- @endif -->
<!-- @endif --><!-- @if tests=true -->
<script src="/config/environments/test.js"></script>
<!-- @endif -->
<!-- endbuild -->
<!-- build:js(tmp/result) /assets/vendor.min.js -->
<script src="/vendor/jquery/jquery.js"></script>
<script src="/vendor/momentjs/moment.js"></script>
<script src="/vendor/showdown/src/showdown.js"></script>
<!-- @if dist=false -->
<script src="/vendor/handlebars/handlebars.js"></script>
<script src="/vendor/ember/ember.js"></script>
<!-- @endif --><!-- @if dist=true -->
<script src="/vendor/handlebars/handlebars.runtime.js"></script>
<script src="/vendor/ember/ember.prod.js"></script>
<!-- @endif -->
<script src="/vendor/ember-data/ember-data.js"></script>
<script src="/vendor/loader.js"></script>
<script src="/vendor/ember-resolver/dist/ember-resolver.js"></script>
<script src="/vendor/ic-ajax/main.js"></script>
<!-- endbuild -->
<!-- build:js(tmp/result) /assets/app.min.js -->
<script src="/assets/app.js"></script>
<script src="/assets/templates.js"></script>
<!-- endbuild -->
<!-- @if tests=true -->
<link rel="stylesheet" href="/vendor/qunit/qunit/qunit.css">
<script src="/vendor/qunit/qunit/qunit.js"></script>
<style>
#ember-testing-container {
position: absolute;
background: white;
bottom: 0;
right: 0;
width: 640px;
height: 384px;
overflow: auto;
z-index: 9999;
border: 1px solid #ccc;
}
#ember-testing {
zoom: 50%;
}
</style>
<!-- @endif -->
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com/">upgrade your browser</a>
to improve your experience.
</p>
<![endif]-->
<!-- @if tests=true -->
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="/tests/tests.js"></script>
<script src="/tests/test_helper.js"></script>
<script src="/tests/test_loader.js"></script>
<!-- @endif -->
<!-- @if tests=false -->
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Blogger</a>
<ul class="nav">
<li><a href="#">Posts</a></li>
<li><a>About</a></li>
</ul>
</div>
</div>
</script>
<!-- @endif -->
<h2>Welcome to Ember.js</h2>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
<button id="btnChange">change model</button>
{{outlet}}
</script>
</body>
</html>
Handlebars stuff is put into the
templates/directory in EAK. So Keepapp.jsandindex.htmlthe way they come originally. Your index.html should be likeadd the stuff tom adds for handlebars in the
templates/directory.