I am using requirejs and am calling in retinajs as a plugin. I am using the shim along with a jQuery dependancy:
....
'plugins/retina.min': {
'deps': ['jquery']
}
....
I then init my application:
requirejs(['./main'], function(App) {
App.init();
});
"main.js":
define(['jquery', 'foo', 'bar', 'plugins/domReady!', 'plugins/retina.min'], function($, foo, bar, retina) {....});
My logo on my page is getting updated correctly, however it seems I am running into a timing issue. Further down the page (or even subsequent page views) the script is getting executed before the page is ready.
Retina.js auto-exectues so there isn't a method to initialize per say. Is there a way to "call" a jquery plugin that auto-executes with require js?
This is wrong, but I think this is something along the lines of what I need:
define(['jquery', 'foo', 'bar', 'plugins/domReady!', 'plugins/retina.min'], function($, foo, bar, retina) {
var App = {
init: function() {
retina.init(); // This doesn't exist
<script src="/plugins/retina.js"></script> // Not even close to valid, but this is what I need.
}
};
return App;
});
Thank you for your time and suggestions!
Try this:
define(['jquery', 'foo', 'bar', 'plugins/domReady!'], function($, foo, bar) {
var App = {
init: function() {
require(['plugins/retina.min'], function(){
// This is straight from retina.js's source: https://github.com/imulus/retinajs/blob/master/src/retina.js#L142
if (Retina.isRetina()) {
Retina.init(window);
}
});
}
};
return App;
});
Related
So here's my main.js file (stripped out all my other scripts for clarity):
require.config({
paths: {
'soundmanager2': '../libs/soundmanager2/soundmanager2',
},
shim: {
'soundmanager2': {
'exports': 'soundManager'
}
}
});
Then i'm loading the library like so:
define(['jquery', 'underscore', 'backbone', 'utilities/events', 'utilities/helpers', 'soundmanager2'],
function($, _, Backbone, events, h, soundManager){
var TrackModel = Backbone.Model.extend({
initialize: function() {
console.log(soundManager);
}
});
return TrackModel;
}
);
The script is being downloaded - but when I log soundManager, I get undefined, no other errors.
Any ideas? Fear i'm missing something obvious..
I found the usage with requirejs in source code comment, but documentation no description. Here is the example.
define(['soundManager2'], function(SoundManager) {
var sound = SoundManager.getInstance();
sound.setup({
useHTML5Audio: true,
idPrefix: '',
onready: function() {},
ontimeout: function() {}
});
sound.beginDelayedInit();
})
This was an issue with the version of soundmanager2 - it has AMD baked in but I can't get it to export for some reason. I reverted to an earlier version, used the shim, and that fixed it!
I have some issue with some requireJS setup. I posted a question before but the scope of the latest changed now.
I have some
requirejs.config({
paths: {
'tmpl': 'vendor/upload/tmpl.min'
}
});
require({
paths: {
'videoupload': 'vendor/upload/jquery.ui.videoupload'
}
}, ['js/main_video.js'], function (App) {
App.initial_video_upload();
});
and finally in main_video.js :
define(['tmpl', 'videoupload'], function () {
function initial_video_upload(tmpl, videoupload) {
'use strict';
$('#videoupload').videoupload({
//...some code
});
}
return{
initial_video_upload: initial_video_upload
}
}
);
This code works perfectly if I don't use requireJS (loading classically each file). In fact, when this code is triggered, I keep on having a message Uncaught TypeError: Object [object Object] has no method 'tmpl', this method is defined in tmpl.min.js. And this method is invoked in vendor/upload/jquery.ui.videoupload, as so
$.widget('videoupload', {
//...
_renderVideo: function (video) {
this._templateElement().tmpl({
id: video.id,
name: video.title
}).appendTo(this._listElement()).find(
this.options['delete-selector']
);
return this;
},
//...
How can I manage that ? (I had earlier an error time out message for this method tmpl, but it disappeared now, so I don't think this is it)
In the configuration object, the path is not the full path to the JS file BUT the path to the directory containing the JS file, so you may want to do something like this in the main_video.js file:
requirejs.config({
paths:{
'upload': 'vendor/upload'
}
});
define(['upload/tmpl','upload/jquery_videoupload'],function(tmpl, videoupload) {
function initial_video_upload(tmpl,videoupload){
'use strict';
$('#videoupload').videoupload({
//...some code
});
}
return{
initial_video_upload: initial_video_upload
}
}
);
And in the main app:
requirejs.config({
paths:{
'js': 'path/to/your/js/folder'
}
});
require(['js/main_video'], function(App) {
App.initial_video_upload();
});
There's a problem in the questions code, so this:
define(['tmpl', 'videoupload'], function () {
should become this:
define(['tmpl', 'videoupload'], function (tmpl, videoupload) {
The first one doesn't expose loaded dependencies to local variables of closure function, so that's might be a problem, although it's not very clear if it's the only one, from the provided code.
I would also like to mention, that it's not a good thing to use multiple requre.js configs, if you're intended to use optimizer. The configs will be overwritten by the last one, so it's a good idea actually to have only one config for the whole project.
Like this:
requirejs.config({
paths: {
'tmpl': 'vendor/upload/tmpl.min',
'videoupload': 'vendor/upload/jquery.ui.videoupload'
}
});
I have 2 models which are cross referencing each other. This could look like this:
MainModel:
define(
[ 'durandal/app', 'durandal/plugins/router', 'models/Shell', 'models/EditModel' ],
function (app, router, shell, editModel) {
//...
return {
//...
// This function should be accessible by the EditModel
update: function() {
//...
},
showEditView: function() {
// Initialise the EditModel with some data and show the according view afterwards
editModel.init('set some important stuff here...');
router.navigateTo('#/EditView');
}
//...
};
}
);
EditModel:
define(
[ 'durandal/app', 'durandal/plugins/router', 'models/Shell', 'models/MainModel' ],
function (app, router, shell, mainModel) {
//...
return {
//...
// This function should be accessible by the MainModel
init: function() {
//...
},
showMainView: function() {
// Update the the MainModel with some data and show the according view afterwards
mainModel.update('set new data here...');
router.navigateTo('#/MainView');
}
//...
};
}
);
Unfortunately this is not working. If I load my page on the MainView and call showEditView, the variable editView is known and everything works fine but then the variable mainModel in the EditModel is undefined and therefore the call mainModel.update(...) fails.
Same thing happens if I load my page on EditView but in the "opposite direction" (var mainModel in the EditModel is known, but editModel in the MainModel is undefined).
Is this a known issue and if so: How can i circumvent it?
I also posted this question in Durandals Google Group
Thanks
Check requierejs documentation for circular dependencies http://requirejs.org/docs/api.html#circular.
Circular dependencies are rare, and usually a sign that you might want
to rethink the design. However, sometimes they are needed, and in that
case, use require() as specified above.
For main.js add require as dependency and then explicitly require models/EditModel should do the trick. Either replicate that for the other modules or rethink the design ;-).
define(
[ 'require', 'durandal/app', 'durandal/plugins/router', 'models/Shell', 'models/EditModel' ],
function (require, app, router, shell, editModel) {
//...
return {
//...
// This function should be accessible by the EditModel
update: function() {
//...
},
showEditView: function() {
// Initialise the EditModel with some data and show the according view afterwards
require('models/EditModel').init('set some important stuff here...');
router.navigateTo('#/EditView');
}
//...
};
}
);
I am working on javascript backbone project. I declared a global object like follow
window.App = { Vent: _.extend({}, Backbone.Events) }
I did above in initialize function like following
initialize: function () {
window.App = { Vent: _.extend({}, Backbone.Events), hello: 'yes' };
console.log(App); // This is ONE. see explanation below for ONE
console.log(App.Vent); // This is TWO. see explanation below
}
ONE
This log line shows following
function (){return parent.apply(this,arguments)} app.js:22
TWO
This log line show
undefined
Also if I do console.log(App.hello) it still says undefined
Please help me what am I doing wrong in this code?
Update
Here is all the related code to my problem. I am using requirejs and backbone
here is my main.js
require(['domReady', 'views/app', 'jqm'], function (domReady, AppView) {
domReady(function () {
window.App = { Vent: _.extend({}, Backbone.Events) };
new AppView();
});
});
here is views/app.js file
define(['backbone', 'views/home/homes', 'collections/homes'], function (Backbone, HomesView, HomesCollection ) {
var App = Backbone.View.extend({
el: 'div#page',
events: {
'swipeleft': 'nextView',
'swiperight': 'preView'
},
nextView: function (e) {
console.log(App.Vent);
//App.Vent.trigger('changeView', { direction: 'next' });
},
preView: function (e) {
console.log(App.Vent);
//App.Vent.trigger('changeView', { direction: 'prev' });
}
});
return App;
});
What I am doing in this file is when user swipes left or right then it calls nextView and preView functions. In these functions I want to trigger and Event which I listen to them in another view. But right now I want to console it. But it says undefined
Try to change:
var App = Backbone.View.extend({
to something else. Like this:
var iApp = Backbone.View.extend({
a newbe question:
I've downloaded the backbone boilerplate from https://github.com/david0178418/BackboneJS-AMD-Boilerplate it uses require.js and I wonder about the code navigation during development.
Here is my question:
let's say I have 2 views one extend the other like so:
View 1:
define([
'underscoreLoader',
'backboneLoader',
'text!templates/main.html'
],
function (_, Backbone, MainTemplate) {
"use strict";
return Backbone.View.extend({
template:_.template(MainTemplate),
initialize:function () {
this.render();
},
log:function(msg){
console.log(msg);
},
render:function () {
this.$el.append(this.template({}));
return this;
}
});
}
);
View 2:
define([
'underscoreLoader',
'backboneLoader',
'text!templates/other.html',
'views/main-view'
],
function (_, Backbone, MainTemplate,MainView) {
"use strict";
// how would you navigate to MainView (main-view.js)
return MainView.extend({
template:_.template(MainTemplate),
initialize:function () {
this.render();
},
render:function () {
this.log("my message");
this.$el.append(this.template({}));
return this;
}
});
}
);
Now when I develop (I use IntelliJ) I would like to middle click MainView on the extended view and navigate to the code without having to browse the project tree.
Is that possible using this boilerplate? is there a better approach or a better boilerplate?
I would really like Netbeans's navigator to show me all the methods:
var New_Controller = Backbone.View.extend({
el : null, ...
}
But I can't seem to get it to work. Google came up with something for #lends, but I can't even get Backbone.js to get loaded to the code hint cache.
I ended up installing WebStorm (I saw the IDE in all the egghead.io tutorials) to get the navigator to list all methods and properties.
FYI, Aptana Studio and Zend Studio showed nothing like Netbeans. And Eclipse IDE for JavaScript Web Developers only partially (impractical in real life) works; it flattens the entire hierarchy.
I found this to work fine for me:
the Backbone Objects are wrapped with my custom objects, which allows me to navigate code, extend objects and keep multiple files easily.
Here is how:
Object 1
function ItemModel() {
ItemModel.model = (
Backbone.Model.extend({
initialize:function () {
},
defaults:{
name:"item name"
},
log:function(){
console.log("inherited method");
}
})
);
return new ItemModel.model();
}
Object 2
function ItemModel2() {
ItemModel2.model = (
ItemModel.model.extend({
initialize:function () {
},
defaults:{
name:"item name2"
}
})
);
return new ItemModel2.model();
}
and in my app:
var App = {
item:new ItemModel(),
item2:new ItemModel2()
};