I recently moved from ember 1.x to 2.6. I am not able to use addObject/pushObject like i used to.
Ember : 2.6.2
jQuery : 2.2.4
import Ember from 'ember';
export default Ember.Controller.extend({
test: ['sibi', 'john'],
init: function() {
this.get('test').pushObject('sebastian');
}
});
This throws an error like pushObject is not a function. What is the workaround? Thank you.
The extend prototypes option was false for some reason.
You can read more about disabling prototype extensions in the guide.
EmberENV: {
EXTEND_PROTOTYPES: {
Array: true
}
}
Thank you!
Check your package.json against ember-disable-prototype-extensions.
If your project is an addon project it had beed added by ember-cli. And you should live with it. (Use Ember.A whenever you need an Ember array.)
If your project is an application project, just remove this addon.
Related
I created a sample ember-cli project using ember 1.13.5. I create one component and a dummy integration test. It runs just fine.
import { moduleForComponent, test } from 'ember-qunit';
moduleForComponent('selected-product', 'Integration | Component | selected product', {
integration: true
});
test('amount', function(assert) {
assert.equal(100.00, 100.00);
});
I then update my ember version to 2.0.0-beta.3 in my bower.json file, run the tests, and receive an immediate error:
TypeError: 'undefined' is not an object (evaluating 'Ember.View.extend')
TypeError: 'undefined' is not an object (evaluating 'this.cache.subject')
There is literally nothing else custom in my projet. I just generated it. I realize it's beta software and not quite ready for primetime, but if anyone knows of a simple configuration change, I would appreciate it. I'm using ember-cli version 1.13.1.
You'll need to the latest version of ember-qunit, v.0.4.4 as of today, as ember-2.0.0-beta.3 compatibility was added in this commit. The version of ember-cli you are using does not come with this version of ember-qunit.
This may seem trivial, but I have been unsuccessful at getting this to work. I have used UserApp.io successfully for user/authentication management. I recently created an ember app using ember-cli, but I am unable to get the two to work together despite ember being supported by UserApp.io. Here are there instructions (integrating with ember without cli).
https://github.com/userapp-io/userapp-ember
Here is a snippet:
Include the UserApp JavaScript library and this Ember module in your index.html. Be sure to add them before your app.js file.
<script src="https://app.userapp.io/js/userapp.client.js"></script>
<script src="https://app.userapp.io/js/ember-userapp.js"></script>
(You can also install the module with bower: $ bower install userapp-ember)
Initiate the module
Add this code above App = Ember.Application.create(); in app.js with your App Id.
Ember.Application.initializer({
name: 'userapp',
initialize: function(container, application) {
Ember.UserApp.setup(application, { appId: 'YOUR-USERAPP-APP-ID' });
}
});
Because I am using ember-cli I have created a file called userapp.js in an initializers folder which has the following code:
import Ember from 'ember';
export default {
name: 'userapp',
initialize: function(container, application) {
Ember.UserApp.setup(application, {
appId: 'USERAPP-ID-INSERTED-HERE',
loginRoute: 'login',
indexRoute: 'index',
heartbeatInterval: 20000,
usernameIsEmail: false
});
}
};
When I run my app I get the following error:
Uncaught TypeError: Cannot read property 'setup' of undefined
I feel like this is something simple/stupid, but for the life of me I cannot figure this one out.
It seems ember-userapp.js is not getting included in ur app. If you are using bower to install it, edit the Brocfile.js to include the lib like
app.import('bower_components/userapp-ember/ember-userapp.js');
Its mentioned here http://ember-cli.com/#standard-non-amd-asset
I am having an issue with the HandlebarsHelper compiled templates on an MVC5 site. Here is the code for the BundleConfig:
bundles.Add(new Bundle("~/bundles/templates", new HandlebarsTransformer())
.IncludeDirectory("~/App/templates", "*.hbs", true));
This was working fine locally and then I pushed to a server hosting the QA environment and I was getting an assembly reference error saying the HandlebarsHelper plugin was calling Jurassic 2.1.0.0 and it wasn't found. So I added Jurassic through Nuget, since then the templates stopped working. I get this error from the browser:
Chrome:
Uncaught TypeError: undefined is not a function
Firefox:
TypeError: templateSpec.call is not a function
This is happening in the following section of handlebars.js:
return function(context, options) {
options = options || {};
var namespace = options.partial ? options : env,
helpers,
partials;
if (!options.partial) {
helpers = options.helpers;
partials = options.partials;
}
var result = templateSpec.call(
container,
namespace, context,
helpers,
partials,
options.data);
if (!options.partial) {
env.VM.checkRevision(container.compilerInfo);
}
return result;
};
I am running:
Ember 1.7.0
Ember-Data 1.0.0-beta.11
Handlebars 1.3.0
JQuery 2.1.1
MVC 5
.Net 4.5.2
I have been searching online all morning and not found any answers yet that have worked, I tried removing the Jurassic Nuget package and it did not help. Any ideas would be appreciated, let me know if there is any other info that would help diagnosing the issue.
You're on a version of HandlbarsHelper that's not supported for that version of Ember.js.
There was a breaking change for version 1.9 which added support for handlebars version 2.0. This is supported in HandlebarsHelper v2.0+. As a breaking change it means 2.0+ can't be used with Ember.JS < v1.9 and Handlebars < v2.0.
The reason why it was probably working initially was because in debug templates are usually just injected into the page unminified.
Easy fix is to use HandlebarsHelper v1.1 (https://www.nuget.org/packages/HandlebarsHelper/1.1.0)
The problem was I was using a version of Handlebars Helper that only supported handlebars 2.x. Found the issue in Nuget and changed it to a different version, everything works now. Thanks for the comments.
I've recently upgraded from ember-cli 0.0.36 to 0.0.37 and have been struggling to import ember-data. Although seemingly simple, it's not working for me. In the Brocfile.js, the old import was
app.import({
development: 'vendor/ember-data/ember-data.js',
production: 'vendor/ember-data/ember-data.prod.js'
});
This was modified to comply with the new syntax:
app.import('vendor/ember-data/ember-data.js', { exports: { ember: ['default'] } });
however, I get the following error:
app.import(vendor/ember-data/ember-data.js) - Passing modules object is deprecated. Please pass an option object with modules as export key (see http://git.io/H1GsPw for more info).
I'm not sure how to proceed with this one so any help is much appreciated.
The new syntax is detailed here
As mentioned in the deprecated message this is the new syntax.
app.import({
development: 'vendor/ember-data/ember-data.js',
production: 'vendor/ember-data/ember-data.prod.js'
}, {
exports: {
'ember-data': ['default']
}
});
This error message was the result of leftovers from the old ember-cli-ember-data shim which was set to version 0.0.4 in the package.json file. I've changed it to 0.1.0 which is the latest as of this writing, removed (deleted) the old ember-cli-ember-data directory from the node_modules package directory and reran npm install. This resulted in the warning message disappearing.
Since ember-cli 0.0.34 jquery is removed from the .jshint file as predefined.
So jquery needs to be imported, but I get the following error when doing it:
import $ from 'jquery';
The error I get is:
ENOENT, no such file or directory 'S:\...\tmp\tree_merger-tmp_dest_dir-Nb27WzDk.tmp\jquery.js'
Error: ENOENT, no such file or directory 'S:\...\tmp\tree_merger-tmp_dest_dir-Nb27WzDk.tmp\jquery.js'
at Object.fs.statSync (fs.js:684:18)
at addModule (S:\...\node_modules\ember-cli\node_modules\broccoli-es6-concatenator\index.js:81:46)
.....
I solved the problem by not importing jquery at all. jQuery is available via Ember.$ (link)
So I changed my code to use Ember.$(...) instead of $(...)
I've ran into the same problem after I updated ember-cli to 0.0.34. Although I was still able to use $ (jQuery) in my code, JSHint kept throwing the error:
project/views/blah.js: line 6, col 9, '$' is not defined.
You can edit your .jshintrc and add $ back to predef.
{
"predef": {
// ...
"$": true,
// ...
},
// ...
}
Would definitely prefer a method using import too.
Not sure if this will be of any help, but I was able to locate the file during build by using the line below, but it caused some issues in the browser:
import $ from 'vendor/jquery/dist/jquery';
$ becomes available after rendering / instantiation, as per usual use of jQuery.
If jQuery is desired to be used otherwise is requires the Ember prefix.
Handlebars is likewise available as Ember.Handlebars, albeit the Ember extended version.
I solved the problem by adding this code to my JS file
import jQuery from 'ember';
Newer versions of Ember/Ember-CLI allow for destructuring, making importing libraries much easier.
import Ember from 'ember';
const { $, get, set } = Ember;
Would bring in jquery, getters and setters.
Make sure you've listed #ember/jquery in your dependencies within package.json of the consumed app/addon. It might look something like this:
"#ember/jquery": "^1.1.0"
Then you can continue to use jquery in the recommended way:
import $ from 'jquery';