Trying to get up and running with serving the Ember.js starter kit app via Express, running into an issue with rendering my data from Ember's app.js
ember's app.js:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
express's layout.jade:
doctype html
html
head
title= title
meta(charset="utf-8")
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/normalize.css')
script(src="/javascripts/vendors/jquery-1.11.1.min.js")
script(src="/javascripts/vendors/handlebars-v1.3.0.js")
script(src="/javascripts/vendors/ember.min.js")
script(src="/javascripts/app.js")
body
block content
express's index.jade:
extends layout
block content
script(type="text/x-handlebars").
<h2>Welcome to Ember.js</h2>
{{outlet}}
script(type="text/x-handlebars" id="index")
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
When I run the app and view source, I can see that layout.jade is rendering OK; all of the expected HTML is there. The problem is that none of my stuff from index.jade is rendered with ember's app.js -- there is no ul element with "red", "yellow", and "blue" li's, though the title element is rendered from express's /routes/index.js, oddly.
I'm really unsure what exactly is going wrong, but I feel like things are leaking between Express and Ember. Reading around it looks like a reasonable approach to doing this would be using ember-tools and requiring that in my layout.jade-- but I don't see a huge difference between doing that and doing something as simple as what I'm doing with this.
Also, likely worth note; when I use the Ember developer tools extension for Chrome, there is no recognized Ember app-- which is what I've observed previously.
Am I better off with the ember-tools option, or is there something staring me in the face that I've likely done wrong?