I have a very simple Ember.js app which works correctly in IE and Chrome, but fails in Firefox (9.0.1 and 10.0). Any reason why? Here's the code:
<!doctype html>
<html>
<head>
<title>Template Name</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="my-template">
{{App.user.name}}
</script>
<div id="container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
<script type="text/javascript">
window.App = Ember.Application.create();
App.user = Ember.Object.create({
name: 'John'
});
App.view = Ember.View.create({
templateName: 'my-template'
});
App.view.appendTo('#container');
</script>
</body>
</html>
The error in firefox is
uncaught exception: Error: <Ember.View:ember143> - Unable to find template "my-template".
This would seem to indicate that the template script has not been evaluated at the point where the app executes. The solution is to wait for onload. Wrap your appendTo like this:
$(function() {
App.view.appendTo('#container');
});
I just experienced the exact same issue. I found out that it was caused due to Ember being dependent on Handlebars. It looks like after version 1.0 they removed the inclusion of the Handlebars source code. After adding in the Handlebars library, the error goes away.
Ember.Application.create({
ready: function() {
App.view.appendTo('#container');
}
});
Tom Whatmore has the correct answer to this in the comments.
The error is displayed in the javascript console only if you use the unminified version of ember.js
The problem is that the template hasn't been evaluated by ember because you're code is executing as soon as the browser hits it, rather than after the ember application has been fully created.
Related
Apologies if this isn't quite the right place (as opposed to either libraries own github issue page, but as I've not been able to determine exactly which library is not quite working correctly hard to log it specifically).
I'm using ember data fragments on my model (an array), and localstorage to save down my model. When calling rollback upon the saved model, it seems to reset the fragments back to their original state (i.e. no values), but it still maintains the fragment itself on the array, rather than dropping the item out of the array.
I've got a fiddle setup, click 'add' to add a model, click to view it's details, then click 'add' in there, followed by 'cancel'. You can see that the type + desc values drop out, but the element is still there.
If I switch out to using the Fixture adapter then it all works as expected, just not sure where to start even attempting to debug, I've stepped through many lines of _super calls, and what not trying to figure it out, but just get lost.
Note
This is a pseudo version of my actual app, and curiously enough when you navigate to the home page and then back to the details page, it seems to resolve the type/desc correctly, which it is not doing on my actual app, it still maintains the default values. However refreshing the page makes it work perfectly from then onwards.
Any help greatly appreciated!
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="//builds.emberjs.com/tags/v1.7.0/ember.js"></script>
<script src="//builds.emberjs.com/canary/ember-data.js"></script>
<script src="//raw.githubusercontent.com/lytics/ember-data.model-fragments/master/dist/ember-data.model-fragments.js"></script>
<script src="//raw.githubusercontent.com/kurko/ember-localstorage-adapter/master/localstorage_adapter.js"></script>
<script>
window.App = Ember.Application.create();
App.ApplicationStore = DS.Store.extend();
App.ApplicationSerializer = DS.LSSerializer.extend();
App.ApplicationAdapter = DS.LSAdapter.extend({
namespace: 'cars'
});
App.Car = DS.Model.extend({
make: DS.attr(),
model: DS.attr(),
features: DS.hasManyFragments('feature')
});
App.Feature = DS.ModelFragment.extend({
type: DS.attr(),
description: DS.attr()
});
App.Router.map(function () {
this.route('index', { path: '/' });
this.route('car', { path: '/car/:car_id'});
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('car');
},
actions : {
add: function(model) {
var car = this.store.createRecord('car', {
make: 'Dodge',
model: 'Viper',
features: []
});
car.save();
}
}
});
App.CarRoute = Ember.Route.extend({
actions: {
add: function(model) {
model.get('features').createFragment({
type: 'Something',
description: 'Some desc'
});
model.save(); //*/
},
cancel: function(model) {
model.rollback();
}
}
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
{{#link-to 'index'}}Home{{/link-to}}
<ol>{{#each}}
<li>{{#link-to 'car' this}}{{name}} {{model}}{{/link-to}}</li>
{{else}}
<button {{action 'add' model}}>Add</button>
{{/each}}</ol>
</script>
<script type="text/x-handlebars" data-template-name="car">
{{#link-to 'index'}}Home{{/link-to}}
<dl>
<dt>Make</dt>
<dd>{{make}}
<dt>Model</dt>
<dd>{{model.model}}</dd>{{#each features}}
<dt>{{_view.contentIndex}}. {{type}}</dt>
<dd>{{description}}</dd>
{{/each}}
</dl>
<button {{action 'add' model}}>Add</button>
<button {{action 'cancel' model}}>Cancel</button>
</script>
</body>
</html>
I havent worked with data fragments but fragment is a model itself so the element/fragment is still there because you have created a record for it.
This record is stored in the ember store until you do something with it.
Rollback, via emberjs.com,does this - "If the model isDirty this function will discard any unsaved changes".
The model in this case seems to be the fragment. Rollback gets rid of the changes, which is what it is doing in your case, removing the type and desc values, but the record itself is still in the store.
If you want to get rid of the fragment altogether you would have to delete it. http://emberjs.com/guides/models/creating-and-deleting-records/
I'm starting simple, trying to display a single value from a simple model.
This answer to "accessing the model from the template" suggests that it's necessary to extend ObjectController. At this point, there's have no application logic, so it doesn't seem like a controller (or a view) is really needed yet.
Likewise, there are no routes yet, so it doesn't seem like anything should be needed beyond App.IndexRoute.
The single object in the dictionary fixture has a title property with the value Hello Ember. I'm expecting to see that text displayed between two hard-coded arrows. Instead, all I get is the arrows.
The Index.html is:
<!DOCTYPE html>
<html>
<head>
<title>Dictionary</title>
</head>
<body>
<!-- Main body of the application -->
<script type="text/x-handlebars">
<p>Title: -->{{title}}<--</p>
</script>
<!-- ... Ember.js and other JavaScript dependencies ... -->
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app/application.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/models/dictionary_model.js"></script>
<script src="js/controllers/dictionary_controller.js"></script>
</body>
</html>
And then the JavaScript:
// application.js
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
// router.js
App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('dictionary', 0);
}
});
// dictionary_model.js
App.Dictionary = DS.Model.extend({
title: DS.attr("string")
});
App.Dictionary.FIXTURES = [
{
id: 0,
title: "Hello Ember"
}];
// dictionary_controller.js
App.DictionaryController = Ember.ObjectController.extend({
});
I'm not sure where you're reading in the documentation that's contradicting, please update your question with the contradicting statements so they can be fixed.
The controller really only need be defined if you need to add additional computed properties, actions, or other methods. In your case you are correct in that it needn't be defined.
That being said, the application template (or unnamed template as in your case) is the root of your ember app. Any child routes/resources will be rendered in the {{outlet}} located in the application template(examples below).
The index route is a route underneath the application route. Resources are considered routes that can have children and generally associated with a model.
All this comes up to the main problem you're seeing. You've returned your model from the index route, but you are attempting to use it in the application route's template.
Here's a simplified version of your code
Code
App = Ember.Application.create();
App.ApplicationAdapter= DS.FixtureAdapter;
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('dictionary', 0);
}
});
App.Dictionary = DS.Model.extend({
title: DS.attr("string")
});
App.Dictionary.FIXTURES = [
{
id: 0,
title: "Hello Ember"
}];
Templates
<script type="text/x-handlebars">
<h2>Application Template</h2>
Here we Are in the Application Template
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Template</h2>
{{title}}
</script>
Example in action
http://emberjs.jsbin.com/OxIDiVU/443/edit
I am trying to set up an ember app, but am recieving some strange behavior. I have two routes set up: "welcome", which is mapped to "/"; and "features", which is mapped to "/features". When navigating to "/", the welcome template correctly renders. But, when I navigate to "/features", it still renders the welcome template.
This jsbin actually works correctly: http://jsbin.com/OSoFeYe/1 , but the code below, which is from my app, does not.
App.Router.map(function() {
this.route("welcome", {path: "/"});
this.resource("features", {path: "/features"}, function() {
this.route("new");
});
});
App.FeaturesIndexRoute = Ember.Route.extend({
});
<body>
<div class="container">
<script type="text/x-handlebars">
<h1>rendered application template</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="features">
<h2>Render features</h2>
<h6>Done features template</h6>
</script>
<script type="text/x-handlebars" data-template-name="welcome">
<h2>Render welcome</h2>
</script>
</div>
</body>
Any insight to this issue would be appreciated.
Add the following to your js file and you won't need the hash anymore.
App.Router.reopen({
location: 'history'
});
Take the code from your jsbin and stick it in your app, you probably have a typo or some block of code where you shouldn't. I edited your "welcome" template to have the following link in the jsbin and it worked perfectly for me.
<script type="text/x-handlebars" data-template-name="welcome">
<h2>rendering welcome template</h2>
{{#linkTo "features"}}features{{/linkTo}}
</script>
In the welcome link it has a link that says "features" directly below the text "rendering welcome template". And when you click the link it says "rendering features template".
Ok, I think I see the issue here, and it's based on my misunderstanding of how ember routes work. I need to include a hash in my url. So my features url is /#/features, not /features.
I am simply trying to render a view using a Handlebars helper. I keep getting a error when the app runs:
Uncaught TypeError: Cannot call method 'apply' of undefined
Handlebars:
<script type='text/x-handlebars'>
{{outlet}}
</script>
<script type='text/x-handlebars' id="index">
INDEX
{{my-component-helper}}
</script>
<script type='text/x-handlebars' id="myComponentHelper">
I'm here
</script>
JS:
App = Ember.Application.create();
Ember.Handlebars.helper('my-component-helper', App.MyComponentHelperView);
App.MyComponentHelperView = Ember.View.extend({
templateName:'myComponentHelper'
});
Here is a JSbin illustrating the issue:
http://jsbin.com/edUm/1/edit
Your problem is the ordering. In your version App.MyComponentHelperView is undefined when the code is interpreted. Try this instead:
App = Ember.Application.create();
App.MyComponentHelperView = Ember.View.extend({
templateName:'myComponentHelper'
});
Ember.Handlebars.helper('my-component-helper', App.MyComponentHelperView);
Ok guys- It really shouldn't get simpler than this. I defined a route named about and added a linkTo about in my template, ran it through the outlet and ember works as expected.
I then added another route called foobars, did the same thing with it and get an uncaught error:
Uncaught Error: assertion failed: The attempt to linkTo route 'foobars' failed. The router did not find 'foobars' in its possible routes: 'about', 'index'
Here's my ember
App = Ember.Application.create()
App.Router.map(function(){
this.resource('about');
this.resource('foobars');
});
My drop dead simple html
<body>
<h1>ember</h1>
<script type="text/x-handlebars">
<h2>application template</h2>
<a>{{#linkTo 'about'}} about {{/linkTo}}</a>
<a>{{#linkTo 'foobars'}} foobars {{/linkTo}}</a>
{{ outlet }}
</script>
<script type="text/x-handlebars" id="about">
<h2>about template</h2>
</script>
<script type="text/x-handlebars" id="foobars">
<h2>foobars template</h2>
</script>
Like I said, it works with the about template, so I know my config is ok. I've also tried adding them separately, like so:
App.Router.map(function(){
this.resource('about');
});
App.Router.map(function(){
this.resource('foobars');
});
I would expect that defining two routes would not be that much different than defining one route, but I am not seeming to understand something. Could someone point out the error of my understanding? Thanks!
I think you just didn't save your file before reloading your page. I tried your example and it worked well for me.
However when I comment out the foobars route:
App = Ember.Application.create();
App.Router.map(function() {
this.resource("about");
//this.resource("foobars");
});
I got the same exact error in my console:
Error: assertion failed: The attempt to linkTo route 'foobars' failed. The router did not find 'foobars' in its possible routes: 'about', 'index'
You need to define the routes in the form:
App.FoobarsRoute = Ember.Route.extend({
model: function() {
return App.Foobars.find();
}
});
This will typically go in its own file: /routes/foobars_route.js