EmberJS: Could not find property 'action' - ember.js

I am using starter kit from Emebr JS and added a simple anchor tag with {{action hello}} to application template.
I am pre-compiling the template with handlebars pre-compiler. When I tried to run this, it is throwing an error.
UnCaught Error: Could not find property 'action'
Previously I used to do the same thing with ember-1.0.pre.js, which was working fine. But When I included the new library of ember (ember-1.0.0-pre.2.js), it is throwing up this error.
In both the cases, I am using handlebars-1.0.rc.1.min.js.
Can anyone please help me out in fixing the issue. Detailed information of what handlebars and libraries I am using are listed below.
Template compiled with handlebars pre-compiler. application.handlebars
<h1>Hello from Ember.js</h1>
<a {{action hello}}>Say Hello!</a>
My HTML Page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.min.js"></script>
<script src="handlebars/compiled/views.handlebars.js"></script>
<script src="js/app.js"></script>
views.handlebars.js contains the compiled handlebar.
App.js:
var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
}),
hello: function() {
console.log("Hello and Welcome");
}
})
})
App.initialize();

When precompiling handlebars views for ember you need to use Ember.Handlebars, not Handlebars. I suspect that may be the problem.
More discussion here: Emberjs Handlebars precompiling

Thanks for the link, but I started to use ember-precompile instead of handlebars pre-compilation. You can find the ember-precompile at https://github.com/gabrielgrant/node-ember-precompile
This module uses older libraries of handlebars and ember, before running this one has to upgrade the libraries to latest versions and then run it. Path to libraries can be modified in "index.js". Adding latest libraries and modifying "index.js" has worked for me.

Related

Handlebars error: Could not find property 'query-params' although Feature activated

I am trying to use query-params in my route / controller but the handlebars helper is causing this error:
Uncaught Error: <(subclass of Ember._MetamorphView):ember689>
Handlebars error: Could not find property 'query-params' on object
.
This error is caused by this link to helper:
{{#link-to 'betround.stats' (query-params game=id) }}
<li {{bind-attr class="isPast:small"}}> {{team1}} {{scoreT1}} : {{scoreT2}} {{team2}} (gameid: {{id}})</li>
{{/link-to }}
I have already upgraded Ember and Handlebars
DEBUG: Ember : 1.4.0-beta.4
DEBUG: Ember Data : 1.0.0-beta.4
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 2.0.3
As well as enabled the query-params-new feature:
<script type="text/javascript">
ENV = {FEATURES: {'query-params-new': true}};
</script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/ember/ember.js"></script>
<script src="bower_components/ember-animated-outlet/ember-animated-outlet.js"></script>
<script src="bower_components/ember-data/ember-data.js"></script>
I am not sure if it is relevant but this is also my controller for the route:
GambifyApp.BetroundStatsController = Ember.ArrayController.extend({
needs: "betround",
queryParams: ['game'],
game: null,
filteredBets: function() {
var game= this.get('game');
var bets = this.get('model');
if (game) {
return articles.filterProperty('game', game);
} else {
return articles;
}
}.property('category', 'model')
});
It's a bug in that version of Ember, it's working in canary versions.
http://emberjs.jsbin.com/ucanam/3566/edit
They put in query-params-new by accident in v1.4.0-beta3, and removed it as of v1.4.0-beta4. The release version of 1.4.0 does not have this feature, as well as the beta versions of 1.5.0.
It looks like if you wanted to keep working with query-params-new, you'll either need to use the canary build (1.6.0) or revert to 1.4.0-beta3.
https://github.com/emberjs/ember.js/issues/4372#issuecomment-35175856

Ember.js can't display own template

I have just started to follow some tutorials and suddenly got a problem with displaying a template.
I can't display any template other than the default one.
The following code is placed just after the default handlebar (which is doing well) in the index.html->body:
<script type="text/x-handlebars" data-template-name='myTemplateName'>
<h2>Why can not I just be shown?</h2>
</script>
I had created a view file which is referenced in the index.html correctly:
MovieTracker.ApplicationView = Ember.View.extend({
templateName: 'application'
});
MovieTracker.ApplicationView = Ember.View.extend({
templateName: 'myTemplateName'
});
The problem is that I'm not getting any errors (checked with firebug console),
but the content of 'myTemplateName' isn't shown.
Why can't I add my own templates, while the default one works fine?
I'll appreciate a lot your help, It's very important to me,
and I searched all over the internet without finding anything.
Has your application template got an {{outlet}} ? Where are you linking to your template?
{{#link-to 'myTemplateName'}}Your Template{{/link-to}}
Have you set up a route?
App.Router.map(function() {
this.route("myTemplateName", { path: "/myTemplateName" });
});
Once the handlebars link to is clicked it should populate your {{outlet}} in your main template with the correct template.

Simple ember routing - how to define multiple routes?

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

Helpers not properly defined in application template?

I'm extremely new to ember.js and am hitting a wall. I'm using ember.js 1.0.0-pre4
My app.js has the following setup:
window.App = Ember.Application.create();
App.Router.map(function() {
this.route("dashboard", {path: "/"});
});
App.DashboardRoute = Ember.Route.extend({
})
I tried doing something like this on the application template (Ember.TEMPLATES['application'])
{{#linkTo "dashboard"}}Dashboard{{/linkTo}}
And it gives me Uncaught Error: Could not find property 'linkTo'. I tried {{view}} as well as other helpers but all gave me the same could not find property error.
jsfiddle: http://jsfiddle.net/gBf42/
Aha, I found the problem! When you use Handlebars.compile it uses the handlebars script instead of the Ember script. Ember has its own handlebars object that extends the original Handlebars object with extra templates. One such template is the {{#linkTo ...}} template.
So to fix, all you have to do is use Ember.Handlebars instead:
Ember.TEMPLATES["application"] = Ember.Handlebars.compile("{{#linkTo 'dashboard'}}Dashboard{{/linkTo}}")

ember.js template not rendered

While it doesn't become simpler than this: fiddle I can't get the template to be rendered. I'm obviously missing something simple but have been starring at this for hours now. Can somebody spot the error?
When debugging in chrome I can see that the View is entered as well as the controller, but the template doesn't seem to come to life. I have several other ember tests running on my laptop that render just fine.
<script type="text/x-handlebars" data-template-name="index">
<h1>Application</h1>
<p>Your content here.</p>
{{outlet}}
</script>
Albumartist = Ember.Application.create();
Albumartist.Router.map(function(match) {
this.route('index', {path: '/'});
});
Albumartist.IndexView = Ember.View.extend({
});
Albumartist.IndexRoute = Ember.Route.extend({
});
Albumartist.IndexController = Ember.Controller.extend({
renderTemplate: function(controller, model){
console.log('hi');
}
});
The problem is simple: You chose Ember as a Framework didn't include jQuery, which is necessary for Ember to run. I've updated the Fiddle to include Ember and Handlebars as a resource and jQuery as a Framework.
Also, since Router v2.1 you don't have to pass the match argument to the router:
Albumartist.Router.map(function() { // no match argument needed anymore
this.route('index', {path: '/'});
});
If I am not mistaken, you need to wrap your code in <script> tags which appear to be missing. This could possibly by a typo when copying your code over to this site though.