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
Related
As-salamu-wa-alicum
Every body,
I have a index.html with
<script type="text/x-handlebars" data-template-name="application">
<div id="tabcontent" class="post" contenteditable="true">
{{outlet}}
</div>
</script>
applicationView.js with
App.applicationView = Ember.View.extend({
template:Ember.Handlebars.compile('welcomeTemplate.hbs')
,templateName:'application'
});
In js/templates/welcomeTemplate.hbs is
<div><p>Welcome</p></div>
In app.js I have
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({ });
In console log I am getting
DEBUG: -------------------------------
DEBUG: Ember : 1.6.1
DEBUG: Handlebars : 1.1.2
DEBUG: jQuery : 1.10.2
DEBUG: -------------------------------
generated -> route:application Object { fullName="route:application"}
generated -> route:index Object { fullName="route:index"}
generated -> controller:application Object { fullName="controller:application"}
Rendering application with default view <(subclass of Ember.View):ember211> Object {
fullName ="view:application"}
generated -> controller:index Object { fullName="controller:index"}
**Could not find "index" template or view. Nothing will be rendered Object {
fullName="template:index"}**
log:
Transitioned into 'index'
Please tell me what is going on here and why am I not see the "Welcome" in browser at /index.html? How will I see "Welcome" in browser at /index.html?
Thank you very much
With best regards
Nadvi.
It doesn't make sense to have both a template and a templateName. Additionally application should be uppercase.
App.ApplicationView = Ember.View.extend({
template:Ember.Handlebars.compile('Hello {{name}}<br/>Name: {{input value=name}}')
});
Ember doesn't load files for you, so stating a hbs name won't do anything, it'll just think of it as a plain string you wanted to show in the page.
http://emberjs.jsbin.com/joyiqute/1/edit
I have a index.html like folows
<body>
<script type="text/x-handlebars" data-template-name="application">
<h2> Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2> Welcome to index</h2>
</script>
</body>
In browser, I see only "Welcome to index" why not
Welcome to Ember.js
Welcome to index
My route related code is
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({ });
My view related code is
App.ApplicationView = Ember.View.extend({
templateName:'index'
});
I use the following js
head.load("css/style.css",
"js/libs/jquery/jquery-1.10.2.js",
"js/libs/jquery/jquery-ui-1.10.4.js",
"js/libs/jquery/jquery.sizes.js",
"js/libs/jlayout/jlayout.border.js",
"js/libs/jlayout/jquery.jlayout.js",
"js/libs/jquery/mutate/mutate.events.js",
"js/libs/jquery/mutate/mutate.js",
"js/libs/handlebars-1.3.0.js",
"js/libs/ember/ember-1.6.1.js",
"js/app.js",
"js/views/applicationView.js"
);
I have seen that if I have removed
templateName:'index'
from
App.ApplicationView
the index template have not remmoved the application template elements but throw a bug
DEBUG: -------------------------------
DEBUG: Ember : 1.6.1
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 1.10.2
DEBUG: -------------------------------
debug:
generated -> route:application Object { fullName="route:application"}
generated -> route:index Object { fullName="route:index"}
generated -> controller:application Object { fullName="controller:application"}
Rendering application with <App.ApplicationView:ember212> Object {
fullName="view:application"}
generated -> controller:index Object { fullName="controller:index"}
Rendering index with default view <Ember._MetamorphView:ember228> Object {
fullName="view:index"}
Transitioned into 'index'
TypeError: document.getElementById(...) is null
document.getElementById( this.morph.start ).parentNode ===
ember-1.6.1.js (line 32241)
I'm trying to use Ember.js group-helper with Ember App Kit.
Since group has no dash, app/helpers/group.js can't be resolved, so I'm loading the helper explicitly in app.js, as explained in EAK docs.
app/helpers/group.js
export default function(option) {
var data = options.data,
fn = options.fn,
view = data.view,
childView;
childView = view.createChildView(Ember._MetamorphView, {
context: Ember.get(view, 'context'),
template: function(context, options) {
options.data.insideGroup = true;
return fn(context, options);
}
});
view.appendChild(childView);
}
in app.js
import GroupHelper from 'appkit/helpers/group';
Ember.Handlebars.registerBoundHelper('group', GroupHelper);
in a template
<ul>
{{#group}}
{{#each}}
<li>{{prop1}} {{prop2}}</li>
{{/each}}
{{/group}}
</ul>
I get an assertion failed :
registerBoundHelper-generated helpers do not support use with Handlebars blocks.
(the app works fine without the group helper)
I know the group-helper is experimental, but does that mean it's not working with current Ember release ?
If this is supposed to work, what am I missing ?
Edit after #Stakoov's comment:
I've updated from Ember 1.4.0-beta6 to 1.4.0 and I'm using Handlebars 1.3.0.
I've tried the EAK way, renaming group to group-item (since EAK resolver needs a dash).
app/helpers/group-item.js
export default Ember.Handlebars.makeBoundHelper(function(options) {
// (...snip...)
});
in the template :
<ul>
{{#group-item}}
{{#each}}
<li>{{prop1}}</li>
{{/each}}
{{/group-item}}
</ul>
Still the same Assertion failed.
I am using ember 1.3.1 and ember-data 1.0.0-beta.5. On creating new mode I get following error
Assertion failed: Cannot clone an Ember.Object that does not implement Ember.Copyable
Following is my model code
App.myModel = DS.Model.extend({
name : DS.attr('string'),
age : DS.attr('string')
});
In my create route model function
return Em.Object.create({});
and finally on save I do following
this.store.createRecord('property', this.get('model'));
Although despite the error, my backend service is called successfully and new model is saved.
Please guide.
Thanks
I had the same issue which I fixed by doing the following:
In the model function of the route replace
return Em.Object.create({});
with
return this.store.createRecord('myModel');
and on save replace
this.store.createRecord('myModel', this.get('model'));
with
this.get('model').save();
For the sake of completeness, in the scenario described by #acidleaf this is the solution offered by Yehuda Katz from the ember core team in this video:
Off the Menu: Building a Client-Side With Ember and Rails - Yehuda Katz # Rails Israel 2013
In the route from which you're returning a list of resources to display (i.e the plural version of the resource StoriesRoute, PostsRoute, etc..), you'll returned a filtered list containing those which are not new:
model: function() {
this.store.find('myModel');
return this.store.filter('myModel',function(myModel){
return !myModel.get('isNew');
});
}
I am quite new to Ember and still trying to catch all problems caused when migrating to newer versions of Ember and Ember Data, but...
On one hand I think you have a mistake in last code block and that it should be:
this.store.createRecord('myModel', this.get('model'));
// myModel instead of property
But on the other hand I dont think this will be the problem :-/
anyway, try to look (and compare) to changes for Ember data here: https://github.com/emberjs/data/blob/master/TRANSITION.md
and also on this http://discuss.emberjs.com/t/createrecord-using-this-get-model-throws-an-error/3968 or similiar
hope it helps!
J.
I have ran into this problem while learning Ember. The accepted answer works, but it first creates a new empty record in the store. This was not desired in my application as it displays the empty record in my view.
My Solution
Router
App.ItemsNewRoute = Ember.Route.extend({
setupController: function(controller, model) {
controller.set('content', {});
}
});
Controller
App.ItemsNewController = Ember.ObjectController.extend({
actions: {
save: function() {
this.store.createRecord('item', {
title: this.get('newTitle'),
category: this.get('newCategory')
}).save();
this.transitionToRoute('items');
}
}
});
Template
<script type="text/x-handlebars" data-template-name="items">
<ul class="list-group">
{{#each}}
<li class="list-group-item">{{title}} - {{category}}</li>
{{/each}}
{{outlet}}
<li class="list-group-item">{{#link-to "items.new"}}Add{{/link-to}}</li>
</ul>
</script>
<script type="text/x-handlebars" data-template-name="items/new">
<li class="list-group-item">
{{input class="form-control" value=newTitle placeholder="Title"}}
{{input class="form-control" value=newCategory placeholder="Category"}}
<button class="btn btn-default" {{action "save"}}>Save</button>
</li>
</script>
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.