I am trying to load Raphaeljs using Requirejs. I tried this solution here:
https://github.com/DmitryBaranovskiy/raphael/pull/540
but when I load it I get:
Uncaught TypeError: Cannot call method 'on' of undefined
I looking more into it I saw that eve is undefined. Anyone have any ideas to get this to work with requirejs?
You can clone Raphael and update the submodules as Dmitry describes here, then for RequireJS, do this:
paths: {
"eve": "libs/raphael/eve/eve",
"raphael": "libs/raphael/raphael"
},
shim: {
'eve': {
exports: "eve"
},
'raphael': {
deps: ["eve"],
exports: "Raphael"
}
}
The just use "raphael" as a dependency when needed.
I encountered the same problem few weeks ago, but I was using JamJS, which is a front end package manager that uses Require.JS and manages require.config.js for you.
This might not solve your problem since I used JamJS, but for whatever is worth here's how I solved it: I created a package for RaphaelJS - using pmcelhaney's fork and also for Eve. You can get the packages from
Eve http://jamjs.org/packages/#/details/eve
Raphael http://jamjs.org/packages/#/details/raphael-amd
Related
I am using the Zurb Fonudation framework. When I place a JavaScript framework such as snap.svg in the src/assets/js folder it will automatically get compiled into the app.js file. So far I've had one jQuery plugin that I've tried to use that is broken, and also snap.svg that gets broken. I'm assuming this has something to do with babel. For example with snap.svg I get the following error..
snap.svg.js:420 Uncaught TypeError: Cannot set property 'eve' of undefined
I've tried placing the path to snap.svg in the config.yml file but that doesn't seem to make any difference other than where snap.svg is located within app.js
I'm assuming I'm just not doing something right. Any ideas?
You can tell babel to not transpile particular pieces of code by passing the 'ignore' flag to it within the build process. E.g.:
function javascript() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: ['src/assets/js/snap.svg']}))
.pipe($.concat('app.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
You can see more about customizing the build process in this forum post: http://foundation.zurb.com/forum/posts/36974-enhancing-foundation-with-bower-components
Is there any component or plugin that I can use, to integrate piwik into an ember application?
It's very simple actually. Sadly I haven't found out yet how I can track the individual views. But this will get you going with a basic set-up that also scales well.
Put this in your ApplicationRoute it hooks the route's didTransition so that every time you transition between routes data gets send to the Piwik server.
actions: {
didTransition: function () {
Ember.run.once(this, function () {
window._paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
_paq.push(['setTrackerUrl', 'https://[Piwik server]/piwik.php']);
_paq.push(['setSiteId', 1]);
});
}
}
And don't forget to put a reference to Piwik.js in your application template to load the Piwik tracking library.
<script src="https://[Piwik server]/piwik.js" async defer></script>
There doesn't seem to be an all-integrated solution for Ember like there is for AngularJS.
You can have a look at this forum thread which may get you started.
You may also want to have a look at how it's working in AngularJS: http://luisfarzati.github.io/angulartics/ or https://github.com/mike-spainhower/angular-piwik
You can use ember-cli-piwik. It's quite simple:
Install the addon:
ember install ember-cli-piwik
Then configure it in your config/environment.js
piwik: {
sid: 123,
url: 'https://your-piwik.endpoint.com'
}
For more information, read the docs.
I am using ember-cli and have a problem with selecting the production environment. Specifically, everything works when I run ember serve --environment=development and I get a blank page when I run ember serve --environment=production. In the console, I see:
Uncaught TypeError: undefined is not a function
Uncaught Error: Could not find module simple-auth/authenticators/base
All other things are equal, and all dependencies are up to date. I'm a total noob so I don't even know where to begin on how to debug: is it ember? ember-cli? broccoli? Any help would be appreciated.
I had exact the same problem, and James_1x0 is correct, it is an broccoli issue.
After debugging it occurs, that the "undefined" error apears on "Ember.handlebars.compile" which lead to other research.
It seems, that in production envrironment "handlebars.js" is replaced by "handlebars.runtime.js" in the ember-cli build process, which seem to be a problem for broccoli at this time.
Other devs had the same problem but with other libraries as well:
https://github.com/stefanpenner/ember-cli/pull/675#issuecomment-47431195
Here the solution was to add:
var index = app.legacyFilesToAppend.indexOf('bower_components/handlebars/handlebars.runtime.js');
if(index) {
app.legacyFilesToAppend[index] = 'bower_components/handlebars/handlebars.js';
}
into your Brocfile.js to replace the "handlebars.runtime.js" with the "handlebars.js".
This also fixed the problem for me.
It sure has the drawback that the whole handlebars file is deployed but its a workarround for now, until the problem is fixed.
Solution is mentioned on Ember CLI website:
This is somewhat non-standard and discouraged, but suppose that due to a requirement in your application that you need to use the full version of Handlebars even in the production environment.
Basically, you can pass vendorFiles option to your EmberApp instance which will force CLI to include full version of Handlebars.
Example of explicitly requiring handlebars.js , in Brocfile.js:
var app = new EmberApp({
vendorFiles: {
'handlebars.js': {
production: 'bower_components/handlebars/handlebars.js'
}
}
});
This is recommended way of solving this issue(discussion on GitHub).
I am using require.js for lazy loading files. I added my code in Ember.Route setup method. It's works fine for me unto Ember v1.4. But for Ember 1.5, it's not.
Here is my code:
App.BaseRoute = Ember.Route.extend({
setup : function(context) {
require(_rp, function() {
//.....
this._super(context);
}, function(error){
//.....
});
}
});
Probably you are suffering from this problem.
There is a blog entry here, describing the problem in the EVER-PRESENT _SUPER (BREAKING BUGFIX) section:
Prior versions of Ember.js used a super mechanism that was un-safe for
mixins. If more than one _super was called for a given function name
and there was no terminating function, an infinite loop would occur.
See #3523 for further discussion.
The solution released in 1.5 fixes this behavior (see #3683), but also
breaks the edge-case of using _super out of line. For instance:
doIt: function(){ Ember.run.once(this, this._super); }
Is no longer a supported use of _super. See this jsbin for a live
example. If this change impacts you, please comment on #4632.
Following features were added in 1.5
[FEATURE ember-routing-auto-location]
[FEATURE ember-routing-bound-action-name]
[FEATURE ember-routing-inherits-parent-model]
https://github.com/emberjs/ember.js/blob/master/CHANGELOG.md
Maybe something you do on setup now interferes with them? Cannot tell without more code / error description.
I have an Ember.js application I have been developing and which has been working great. I am now attempting to integrate in a SIP over Websockets library called JsSIP. Both my Ember app and a separate proof-of-concept SIP app work great independently; however, as soon as I integrate the two together I start seeing weird errors in the SIP library. I finally narrowed things down to the fact that it's a namespace issue between the 2 APIs
I have seen at least one other SO question regarding namespace conflicts between Ember.js and other libraries which do any sort of DOM manipulation (such as JQuery Mobile). To my knowledge, the SIP library I'm using is doing very little if any actual manipulation of the DOM. I have seen some suggestions for using RequireJS, although I really didn't want to have to modulize my client and don't even know if it would solve the namespace conflicts. Would wrapping things in an Ember.Namespace help?
I've created a super simple JSFiddle which demonstrates the core issue. Any suggestions on how I might go about solving this issue between the 2 libraries are greatly appreciated. Here's the bare bones code which is included in the Fiddle:
// JsSIP code
try
{
var configuration = {
'uri': "example#sip2sip.info",
'password': "password",
'trace_sip': true,
'ws_servers': "ws://example.com"
};
myPhone = new JsSIP.UA(configuration);
myPhone.start();
}
catch(e)
{
console.log(e.message);
}
// Ember code
window.App = Ember.Application.create();
The construction of JsSIP.UA is transforming ws_servers into an array and iterating over it with for(element in array), which trips in extensions to the Array prototype made by Ember.js. You can disable that with the following code for your SIP library to work out of the box (add it before including the Ember script):
window.Ember = {};
Ember.EXTEND_PROTOTYPES = false;
This can have a big impact on your Ember app, though. Read this documentation page to learn more: http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/