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
Related
I'm setting up a app with Require JS and backbone. But in my setup backbone is not loading correctly even if I included all the things
This is my main file.
require.config({
paths: {
/*app: 'app',*/
/*Libs and other resources*/
jquery: 'libs/jquery',
underscore: 'libs/underscore',
backbone: 'libs/backbone'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
}
}
});
require(['backbone'], function (Backbone) {
console.log(Backbone);
});
This is the status of the scripts.
UPDATE:
Removed the shim according to comments. But still its not working.
This happen due to a corrupted backbone.js lib files. I copied this file via a phpstorm from some other place in the project.
I have tried multiple suggestions and non of them are worked. At last I just created a single html file and tried to backbone worked there. Then I realized there may be a problem with backbone.js and just re-downloaded it and replaced. Now everything got to work.
I am creating a Google Chrome Extension that have to add content on the visited websites (like a toolbox).
I have to use RequireJS and BackboneJS (Chaplin) and everything is ok except when i'm visiting a website using RequireJS (and Backbone, but the problem seems to come from RequireJS conflicts).
(This is when I use content scripts to include a -script- tag that includes RequireJS.)
I suppose it's normal to have conflicts if I add content directly in the page so I tried the solution here : Loading multiple instances of requireJS and Backbone
It seems to work (for now), but the website is trying to reload his own RequireJS file (with his path, but in my extension) before loading mine and I'm afraid it could lead to unexpected behaviour.
Plus, I have to precise my file paths in requirejs.config or it's looking for them in Bitbucket sources (cloudfront). (Maybe it's normal though)
Example with bitbucket :
Denying load of chrome-extension://mgncmiffelpdhlbkkmmaedbodabdchea/https://d3oaxc4q5k2d6q.cloudfront.net/m/7aaf1677069c/amd/build/main.js?8uxr. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
<--------- This file is Bitbucket's RequireJS, Bitbucket is still working fine though
Is there another solution I didn't find yet ? Or am I doing it wrong ? I'm a beginner with RequireJS (and Chrome ext.. and Backbone...) so I might have missed something.
Here is the Content script part in manifest.json
"content_scripts": [
{
"matches": ["https://*/*", "http://*/*"],
"js": ["bower_components/requirejs/require.js",
"extension/init-app.js",
"extension/main.js"]
}],
init-app.js is Rob's script
require.load = function(context, moduleName, url) {
url = chrome.extension.getURL(url);
var x = new XMLHttpRequest();
// Append Math.random()... to bust the cache
x.open('GET', url + '?' + Math.random().toString(36).slice(-4));
x.onload = function() {
var code = x.responseText;
x += '\n//# sourceURL=' + url; // Optional, for debugging.
window.eval(code);
context.completeLoad(moduleName);
};
x.onerror = function() {
// Log error if you wish. This is usually not needed, because
// Chrome's developer tools does already log "404 Not found"
// errors for scripts to the console.
};
x.send();
};
and main.js contain requirejs.config + app
// Configure the AMD module loader
requirejs.config({
skipDataMain: true,
// The path where your JavaScripts are located
baseUrl: 'extension',
// Specify the paths of vendor libraries
paths: {
jquery: '../bower_components/jquery/jquery',
underscore: '../bower_components/lodash/dist/lodash',
backbone: '../bower_components/backbone/backbone',
handlebars: '../bower_components/handlebars/handlebars',
text: '../bower_components/requirejs-text/text',
chaplin: '../bower_components/chaplin/chaplin',
application: '/extension/application',
routes: '/extension/routes',
},
// Underscore and Backbone are not AMD-capable per default,
// so we need to use the AMD wrapping of RequireJS
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
exports: 'Handlebars'
}
}
// For easier development, disable browser caching
// Of course, this should be removed in a production environment
//, urlArgs: 'bust=' + (new Date()).getTime()
});
// Bootstrap the application
require(['application', 'routes'], function(Application, routes) {
new Application({routes: routes, controllerPath: 'scripts/controllers/', controllerSuffix: '-controller'});
});
It works on gooogle.com for instance, but I get
GET chrome-extension://ccgfmmmnebacpnbdpdnphmnmicaooddg/extension/Home.js?9zfr net::ERR_FILE_NOT_FOUND
on https://www.cloud9trader.com (website using RequireJS) because it has
<script data-main="/0.2.59/scripts/Home.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
in its source. To summarize I just need the script to ignore the "current" website Require file.
The skipDataMain option is synchronously checked when require.js is loaded. Setting this variable after loading require.js has no effect on the loader any more, because the data-main scan has already run at that point.
The correct way to skip data-main is to declare the configuration before loading require.js, as follows:
// extension/config.js
var require = {
skipDataMain: true
};
manifest.json:
{
...
"content_scripts": [{
"matches": ["https://*/*", "http://*/*"],
"js": [
"extension/config.js",
"bower_components/requirejs/require.js",
"extension/init-app.js",
"extension/main.js"
]
}],
...
}
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.
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
});
});
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){
...
});