I keep hitting this error and am pretty stumped as to why. I can't trace the error in dev tools back to anything in my primary JS file. My Ember-related code is as follow:
var App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function() {
var url = 'http://www.json-generator.com/api/json/get/bMRERKrXfS';
return Ember.$.getJSON(url).then(function(data) {
model = {
list1: data
};
return model;
});
}
});
Ember.Handlebars.helper('autocomplete', Ember.View.extend({
templateName: 'controls/autocomplete',
filteredList: function() {
...
}
return list.filter(function(item) {
...
});
}.property('list.#each', 'filter')
}));
I have removed app-specific code from the structure there. Any time I try to run this I get the following error:
Ember Cannot read property 'path' of undefined which looks to be coming from my ember.min.js file. Any help tracking this down would be great.
Codepen Demo Link
EDIT
When running this code locally and not in CodePen I end up with the following errors:
Uncaught TypeError: Cannot read property 'extend' of undefined which looks to be thrown by Ember.View.extend
and
Uncaught TypeError: Cannot read property 'isHelperFactory' of undefined which is coming from the ember.min file.
EDIT 2
I have tried updating the helper to an Ember component:
App.AutoCompleteComponent = Ember.Component.extend({
filteredList: function() {
var list = this.get('list'),
filter = this.get('filter'),
filterArr = [],
filterArrLength;
if (filter && filter.indexOf(', ') !== -1) {
filterArr = filter.split(', ');
filterArrLength = filterArr.length;
filter = filterArr[filterArrLength - 1]
}
if (!filter || (filterArrLength > 0 && filterArr[filterArrLength - 1].length == 0)) {
$("#filter-results").hide();
INPUT.unbindKeys();
return;
} else {
if (!$("#filter-results").is(":visible")) {
INPUT.bindKeys();
$("#filter-results").show();
}
}
return list.filter(function(item) {
if (!filterArrLength) {
return item.title.toLowerCase().startsWith(filter);
} else {
return item.title.toLowerCase().startsWith(filterArr[filterArrLength - 1]);
}
});
}.property('list.#each', 'filter')
});
And I have updated my Handlebars template to be "components/auto-complete"
Still, with this I am receiving the same errors. My CodePen link has also been updated for review.
Ember.View is deprecated. See the new docs about writing helpers.
However based on the functionality described and because you are providing a template I suspect that what you want is a component:
// app/components/auto-complete.js
import Ember from 'ember';
export default Ember.Component.extend({
filteredList: ...
});
The template is automatically found by Ember, in this case at templates/components/auto-complete.hbs.
Edit to your Edit 2: Note that defining objects on App is now deprecated.
Related
here is the error from the ember test --serv output:
Integration | Component | date-time-input: it renders
✘ TypeError: 'undefined' is not a function (evaluating 'elem.getAttribute( name )')
http://localhost:7357/assets/vendor.js:1685
This happens with all of my Integration and Acceptance tests.
How do I debug this error without a decent stack trace?
is there a way to configure ember to give me a decent stack trace?
Here is the test for the above error:
import { moduleForComponent, test } from 'ember-qunit';
import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('date-time-input',
'Integration | Component | date-time-input', {
integration: true,
});
test('it renders', function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.on('myAction', function(val) { ... });
let two = Ember.Object.extend({
someDate: null,
});
this.set('two', two);
this.render(hbs`{{date-time-input model=two field='someDate'}}`);
assert.notEqual(this.$().text().indexOf('2016'), -1);
});
and the corresponding component
import Ember from 'ember';
export default Ember.Component.extend({
fieldValue: Ember.computed('model', 'field', function () {
let fieldName = this.get('field');
let value = this.get('model.' + fieldName);
return value;
}).readOnly(),
actions: {
dateChanged: function (value) {
let model = this.get('model');
let field = this.get('field');
model.set(field, value);
},
},
});
{{flat-pickr
dateFormat='F j, Y at'
timeFormat='h:i K'
value=fieldValue
enableTime=true
onChange=(action 'dateChanged')
}}
here is my repo, in case anyone is curious: https://github.com/NullVoxPopuli/aeonvera-ui
You're actually getting a useful stacktrace, though in the compiled vendor.js rather than in the source files.
If you're using Chrome, open up assets/vendor.js in the sources panel. Then set a breakpoint on line 1685. Because ember-cli creates source maps on asset compilation, Chrome should immediately take you to the corresponding line in the source file.
It's annoying that Testem doesn't point to the the source file, but you should be able to work your way back from the compiled files all the same.
(Also, it looks like the top line of your stack trace is from jQuery, if that helps.)
Im using Meteor + React and "this.props.thing.source" is a string for a mongodb _id.
The "findOne()" function is one of Meteor's. As you can see it works fine when I pass in the string of the ID itself, but I get an undefined error when passing in the variable, even though that variable renders out that same string.
In this code:
Thing = React.createClass({
propTypes: {
thing: React.PropTypes.object.isRequired
},
render() {
return (
<ul>
<li>Display: {Things.findOne(this.props.thing.source).data}</li>
<li>Display: {Things.findOne("emq6M4WbJeRvkA6Q3").data}</li>
<li>Source: {this.props.thing.source}</li>
</ul>
);
}
});
This does NOT work:
Display: {Things.findOne(this.props.thing.source).data}
This works:
Display: {Things.findOne("emq6M4WbJeRvkA6Q3").data}
And this correctly renders "emq6M4WbJeRvkA6Q3":
Source: {this.props.thing.source}
The ERROR I am getting:
"Uncaught TypeError: Cannot read property 'data' of undefined"
You're getting the error because of whatever Things.findOne() returns is undefined.
You say that calling above function with the this.props.thing.source does not work, which is wrong but since you're not mentioning how the rendering of your Thing component takes place your best bet to find the error is the way you're passing the prop this.props.thing.source/what you're passing to your component.
I made a quick copy-paste example that illustrates and also made your component work in a JSFiddle
var Things = {
findOne: function (thingSource) {
if (thingSource) {
return {
data: 'It did work!'
};
}
return undefined;
}
}
var Thing = React.createClass({
propTypes: {
thing: React.PropTypes.object.isRequired
},
render: function() {
return <div>Hello {Things.findOne(this.props.thing.source).data}</div>;
}
});
React.render(<Hello thing={{source: true}} />, document.body);
A working example with your exact component can be found here
I have an app where we need to create an initializer that inject our global into all the route where our global is a function that load data from a JSON file and return the data.
global-variable.js
export function initialize(container, application) {
var systemSetting = {
systemJSON: function(){
return Ember.$.getJSON("system/system.json").then(function(data){
return data
});
}.property()
};
application.register('systemSetting:main', systemSetting, {instantiate: false});
application.inject('route', 'systemSetting', 'systemSetting:main');
}
export default {
name: 'global-variable',
initialize: initialize
};
index.js - route
export default Ember.Route.extend({
activate: function(){
var _settings = self.systemSetting.systemJSON;
console.log(_settings.test);
},
}
system.JSON
{
"test" : 100
}
the result of the console.log give me this
ComputedProperty {isDescriptor: true, _dependentKeys: Array[0], _suspended: undefined, _meta: undefined, _cacheable: true…}
I think it's because of the JSON is not loaded yet but after that I try to do something like this at route
index.js - route
activate: function(){
var self = this;
var run = Ember.run
run.later(function() {
var _settings = self.systemSetting.systemJSON;
console.log(_settings);
}, 1000);
},
but still give me the same log. Am I use wrong approach to this problem?
I finally found the answer. Because of what I want to call is from an initializer then one that I must do is to use .get and if I just using get then the one that I received is a promise and to get the actual data I must use .then
The code will look like this:
index.js - route
activate: function(){
this.get('systemSetting.systemJSON').then(function(data) {
console.log(data.test);
});
}
I've just decided to learn backbone. I'm following a video tutorial. Everything works fine there, but at my end I get this error "Uncaught TypeError: Cannot read property 'name' of undefined".
Here's my code:
var MenuItemDetails = Backbone.View.extend({
render: function() {
var markup = this.options.name + this.options.category + this.options.imagepath;
// I also had some html markup in the string above, of course, but I've striped it because stackoverflow didn't show it in the preview of my post.
this.$el.html(markup);
return this;
}
});
var AppRouter = Backbone.Router.extend({
routes: {
"" : "list",
"menu-items/new" : "itemForm",
"menu-items/:item" : "itemDetails"
},
list: function() {
$('#app').html('List screen');
},
itemDetails: function(item) {
var view = new MenuItemDetails({ name: item, category: 'Some category', imagepath: 'no-image.jpg' });
$('#app').html(view.render().el);
},
itemForm: function() {
$('#app').html('New item form');
}
});
var app = new AppRouter();
$(function() {
Backbone.history.start();
});
The "itemDetails" function gives "Uncaught TypeError: Cannot read property 'name' of undefined" error. Of course, if I don't use the 'name' property in the view, I get "Uncaught TypeError: Cannot read property 'category' of undefined". In the video tutorial that I'm following, everything works fine (it uses version 0.9.1 of backbonejs). I use the latest (1.1.0).
Does anybody know why do I get this error?
There isn't anything misspelled, everything is in the right order (exactly as in the video tutorial, where it works). Why does backbone throws me this error?
Backbone views used to automatically copy the constructor options to this.options but no longer:
Change Log
1.1.0 — Oct. 10, 2013
Backbone Views no longer automatically attach options passed to the constructor as this.options, but you can do it yourself if you prefer.
So if you're depending on this.options being set in your views then you'll have to do it yourself:
var MenuItemDetails = Backbone.View.extend({
initialize: function(options) {
this.options = options;
},
//...
});
Or better, unpack the options so that you know what your view's interface is:
initialize: function(options) {
this.options = _(options).pick('name', 'category', 'imagepath');
}
This way you at least have a list of what you're expecting to see in options.
I'm trying to write a frontend with ember.js and ember-data for a REST service. The server returns the data (I do see this using fiddler) but I always get the error Unable to set property 'store' of undefined or null reference. My JS code:
window.Cube = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true
});
var attr = DS.attr;
Cube.Subject = DS.Model.extend({
name: attr(),
change_date: attr(),
create_date: attr()
});
Cube.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'backend/v1/api',
host: 'http://localhost:58721'
});
Cube.Store = DS.Store.extend({
revision: 12,
url: "http://localhost:58721",
adapter: Cube.ApplicationAdapter
});
Cube.IndexRoute = Ember.Route.extend({
model: function (params) {
var store = this.get('store');
return store.findAll('Subject');
}
});
The error originates in ember-data.js:
modelFor: function(key) {
if (typeof key !== 'string') {
return key;
}
var factory = this.container.lookupFactory('model:'+key);
Ember.assert("No model was found for '" + key + "'", factory);
factory.store = this; // error here
factory.typeKey = key;
return factory;
}
As far as I understand ember, the store should be automatically set, but it is always null.
How to define the model, so the store is available? What am I missing?
Update 1:
Updated ember. Now I use the following versions:
DEBUG: Ember : 1.1.0
DEBUG: Ember Data : 1.0.0-beta.3
DEBUG: Handlebars : 1.0.0
DEBUG: jQuery : 1.9.1
No I get the following errors in the console:
No model was found for 'nextObject'
Error while loading route: TypeError: Unable to set property 'store' of undefined or null reference
subject should be lower case, additionally findAll is an internal method, you should be using find with no additional parameters (which then calls findAll).
Cube.IndexRoute = Ember.Route.extend({
model: function (params) {
var store = this.get('store');
return store.find('subject');
}
});