I have a backbone jquery mobile app in which i want to use mobiscroll date picker.
I tried include it in the head tag.
TypeError: Cannot read property 'widget' of undefined
But i am getting this error.
Is mobiscroll require js compatible ?
How can i load it to use it within my views directly ?
Make sure you're including Mobi Pick's JS file after Jquery Mobile.
I'm new to jQuery Mobile and realized I did that mistake just now. This solved it for me.
Just include mobiscroll the same way you include jquery and set the dependency on jquery. I'm posting here an example how you can include mobiscroll with require.js:
require.config({
paths: {
jquery: 'vendor/jquery/jquery.min'
mobiscroll: 'vendor/mobiscroll/mobiscroll..min'
},
shim: {
jquery:{
exports: "jquery"
},
mobiscroll:{
deps: ['jquery'],
exports: "mobiscroll"
}
}
});
require(['domReady','app', 'mobiscroll'],
function(domReady, App){
...
});
Related
I'am trying to add toastr to my app and get error "ReferenceError: toastr is not defined"
Here is my requirejs config:
requirejs.config({
baseUrl: 'scripts/lib',
waitSeconds: 200,
paths: {
'jquery': 'jquery/jquery-1.10.2',
'toastr': 'jquery/toastr'
},
shim: {
toastr: ['jquery']
}
And when I tryng to add toastr as module dependency I got this error.
What should I do to fix this problem?
Thank you
I think you should better use an angular port of toaster, like AngularJS-Toaster.
The main advantage is that it will work "inside angular".
The approach you were following is not angular aware, and it wont work "inside" angular ( is not an angular module ). You will have to communicate with angular each time you use it (notify changes on your models or whatever).
Using jQuery toaster does not need to be listed as a dependency for your angular application, since its not an angular module. Toaster should be ready for use without being listed as dependency.
I wanted to see what I would need to do to use Backbone BUT not use jQuery?
I want to use Famo.us for the views and so trying to decouple jQuery from Backbone. I will mostly be using just the Backbone Models and Collections - though may use the framework for a View and insert 'Famo.us' code. Bit Famo.us has this integration low on the list of things to do...
If I just wanted to use the Models and Collections of Backbone, what would I need to do in order for it to run successfully without jQuery?
Thanks.
-- I've just tried replacing jQuery with jBone but it doesn't seem to like the change:
require.config({
baseUrl: "js",
nodeRequire: require,
paths: {
"backbone" : "vendor/backbone.min",
// exoskeleton : "vendor/exoskeleton.min",
jbone: "vendor/jbone.min",
json2: "vendor/json2",
"requirejs": "vendor/requirejs/require",
underscore: "vendor/underscore.min"
},
shim: {
jbone: {
exports: "$"
},
underscore: {
exports: "_"
},
backbone: {
deps: ["jbone", "underscore", "json2"],
exports: "Backbone"
}
}
// map: {
// 'exoskeleton': {'underscore': 'underscore-empty'}, // Remap Exoskeleton to use an empty underscore file.
// '*': {
// 'underscore': 'underscore-private', // Everything else in the app that requests _ will use the Backbone.utils version.
// 'backbone': 'exoskeleton'
// }
// }
});
I did try Exoskeleton though could not see examples of how to use it properly - so I wanted to try and simply remove jQuery and try jBone.
I'm going to be using Famo.us for the Views, so only really need to use Backbone for the MC part of MVC.
Backbone use jQuery only to manipulate with DOM. If you won't do that - you didn't need jQuery ( for example you are using only model system with enother framework or work at server side).
You also can use another lib instead of jQuery ( with the same API ) - like Eksoskeleton or other likes - - just redefine Backbone.$
P.s look at https://github.com/inkling/backbone.native and https://github.com/jashkenas/backbone/wiki/Using-Backbone-without-jQuery
I am building a large scale application using backbone and marionette. Instead of using underscore templating engine, I am planning to use dust.js.
I have found marionette-dust plugin which could do the job but currently I am at a loss in understanding how to use it with require.js. Also, it there a better way of implementing dust besides using this plugin?
Feedback appreciated.
Following is the code in sample application
testView.js
define(["app", "templates/test.dust"], function(app, testTpl){
app.module("test.view", function(view, app, Backbone, Marionette, $, _){
view.list = Marionette.ItemView.extend({
template: testTpl,
});
});
return app.test.view;
});
test.dust
(function() {
dust.register("demo", body_0);
function body_0(chk, ctx) {
return chk.write("This is Dust.js Test");
}
return body_0;
})();
main.js
requirejs.config({
baseUrl: "assets/js",
paths: {
backbone: "vendor/backbone-min",
jquery: "vendor/jquery-min",
marionette: "vendor/backbone.marionette-min",
tpl: "vendor/tpl",
underscore: "vendor/underscore-min",
dust: "vendor/dust",
dustHelpers: 'vendor/dust-helpers',
dustMarionette: "vendor/backbone.marionette.dust",
templates: 'templates/compiled',
},
shim: {
jquery: {
exports: 'jquery'
},
underscore: {
exports: "_"
},
backbone: {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
marionette: {
deps: ["backbone"],
exports: "Marionette"
},
dust: {
exports: 'dust'
},
dustHelpers: ['dust'],
templates: ['dust', 'dustMarionette']
}
});
require(["app"], function(app){
app.start();
});
I'm the author of that plugin. Basically you need to define the three dependencies
'backbone', 'dust' and 'marionette' in your Requirejs config file and then define
the AMD version of this module as a dependency after marionette during the initial application setup.
The plugin is written under the assumption that you have compiled all of your dust templates and they are in the dust cache (you should find details on how to do that in the dust documentation). You may see why if you have a look at the plugin source code. Inside of each your views simply set the template property to the name of the template in the dust cache that you want to use.
The plugin overrides the render function in the Marionette.Renderer object that is used by all views. So basically under the hood, Marionette is calling the render function of this plugin which renders the templates with Dust and then returns the HTML. Marionette's documentation here mentions this is the best way to provide custom rendering.
I've tried to outline all of this in the Readme file for the plugin but if you think it can be improved (which I don't doubt it can) then please let me know which areas are unclear.
I've written a Yeoman generator called generator-maryo to provide scaffolding for a marionette and dust web application. There are still a few todos in there but it provides you with a good foundation on how to use the marionette-dust plugin with marionette. If I can be more explicit in any area then let me know.
EDIT AFTER CODE ADDED TO QUESTION
The marionette-dust plugin is access by template name, not by the compiled template function. So essentially you need to run the compiled template function (which it should do by itself as it's an anonymous function), then it will be placed in the dust cache under the name "demo". So your item view should look like:
define(["app", "templates/test.dust"], function(app, testTpl){
app.module("test.view", function(view, app, Backbone, Marionette, $, _){
view.list = Marionette.ItemView.extend({
template: "demo",
});
});
return app.test.view;
});
Note that all I did was set the template property to "demo". Also, is this all of the code for the demo app? You need to actually show the view using a region or you can just call the render function on the view manually. To get something working quickly, you can do something like this:
myView = new app.test.view;
$('body').append(myView.render().$el);
Also, why are you wrapping the view in a module block? As you're already using RequireJS, Marionette's module system is not really necessary. I am in the process of writing a demo app for Marionette using generator-maryo which will probably explain a lot. Keep an eye out for it in the github repo.
I'm looking to use AngularStrap in an existing Angular.js application which is using require.js as the module loader. I'm having trouble getting AngularStrap loaded correctly in the application. When I try to include 'angularStrap' in my Angular module, it fails to initialise. Below is an extract from my requirejs config.
paths: {
'angular' : 'lib/angularjs/angular',
'angularStrap': 'lib/angularstrap/angular-strap',
'angularStrapTpl': 'lib/angularstrap/angular-strap.tpl',
},
shim: {
'angularStrap' : {
deps : [ 'angular', 'angularStrapTpl' ],
},
}
Has anyone managed to use AngularStrap with require.js? I suspect my dependencies are slightly incorrect.
Yo need to add angular-animate to your requirejs configuration.
Github Link: https://github.com/Augus/ngAnimate
My code uses Backbone with Requirejs and jQuery File Upload and works perfectly in IE 9 when I access the development code directly (without building). As soon as I build it something goes wrong and the request is sent empty to the server.
The only difference I see in the request (using Network capturing in IE9) is that the one that works when I click in the upload button, the Initiator is click, and for the one that fails, the initiator is JS Library XMLHttpRequest.
So there must be something making the event change when the code gets compressed, but I have no idea how to get closer to the root of the problem.
Any ideas?
Are you requiring the iFrame Transport plugin?
I am using jQuery File Upload with Requirejs, and have not seen this issue. Without seeing some code, it is hard to say what is tripping up your application. I suggest updating your question with some relevant code. In the meantime, here is what is working for me.
main.js
require.config({
appDir: '../',
baseUrl: 'js/',
paths: {
underscore: '../vendor/lodash.underscore',
backbone: '../vendor/backbone',
'jquery.fileupload': '../vendor/jquery-file-upload/js/jquery.fileupload',
'jquery.iframe-transport': '../vendor/jquery-file-upload/js/jquery.iframe-transport',
'jquery.ui.widget': '../vendor/jquery-file-upload/js/jquery.ui.widget'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
And in the page that houses the upload control:
UploadPage.js
define([
'views/Base',
'jquery.iframe-transport',
'jquery.fileupload'
], function(BaseView) {
return BaseView.extend({
// Do cool stuff
});
});