I am using Browserify to handle the Javascript libraries that my application need as follows:
var $ = require('jquery');
var _ = require('underscore');
var Backbone = require('backbone');
Backbone.$ = $;
This all works fine. However, when I try and add backbone-localstorage as follows:
var LocalStorage = require('backbone-localstorage');
It says that Backbone is not defined (in backbone-localstorage).
It looks like jQuery is passed into Backbone like this:
Backbone.$ = $;
But
LocalStorage.Backbone = Backbone;
Does not seem to yield the same results.
What is the best way to do this? Thanks!
EDIT
Changed to use backbone.localstorage instead of backbone-localstorage
You're close.
Backbone.LocalStorage = require("backbone.localstorage");
See docs
Related
I am trying to get Browserify working Marionette. More precisely I'm trying to figure out how to require the commands Backbone.Wreqr.Commands.
I keep getting this error
Uncaught TypeError: Cannot read property 'Commands' of undefined
With this code
Backbone = require('../shims/backbone');
module.exports = new Backbone.Wreqr.Commands;
This is my setup
main.coffee (browserify entry point)
app = require('./app')
Backbone = require('./shims/backbone')
commands = require('./config/commands')
shims/backbone
module.exports = Backbone
shims/marionette
module.exports = Backbone.Marionette
config/commands
Backbone = require('../shims/backbone')
module.exports = new (Backbone.Wreqr.Commands)
As you can see from above I decided to not use browserify for the main dependencies so essentially I'm including them in the page globally but then using these custom shims above to include them in my app.
The problem I'm having is it seems Wreqr does not exist on the Backbone object. I guess that sort of makes sense as I saw in the source this is added with the Marionette library.
But how exactly do I reference it here?
I found a somewhat related problem with require-js https://github.com/marionettejs/backbone.marionette/issues/1297
with this code
RestangularProvider.setBaseUrl('http://localhost:8080/api/1');
var elements = Restangular.all('events');
elements.getList();
I can call the endpoint
http://localhost:8080/api/1/events
but how can manage the code to have
http://localhost:8080/api/1/events/around/me
You can use the following code, to get the events
var getEvents = Restangular.oneUrl('getEventAroundMe', 'http://localhost:8080/api/1/events/around/me');
I'm doing some studies using the Pixijs library, which I find amazing. I'll also have a look into Fabricjs, that seems to have a smaller footprint.
I've been working with Angularjs for some time now and I like conventions, instead of taking time in each project doing configuration and organizing code differently every time.
I would like to hear from some body who experienced Pixijs (or similar) with a framework to organise the code.
I understand that Angularjs is MVVM, but let me know about any tips or suggestion that you may think of?
I did some research this far and a few things came to my mind, such as Browserify (I do believe in convention instead of configuration like I've mentioned though and maybe this wouldn't be the best tool for me).
Kinda old question, but this is something I was looking for myself when starting out with PIXI, so I hope it could be of help to someone to get started.
I use the Revealing module pattern and separate the application into separate files/modules, and then use Browserify to create the application bundle. The HTML loads the app.js bundle which stems from the app.js source below.
index.html: Load your libs (PIXI et al) in <head> and then your app.js in the <body>.
app.js source example:
(function() {
// App.js is the "bootstrap" that loads dependencies, takes care of pre-loading etc.
// I have a template of this which I copy into any new project and use as a checklist.
var core = require("./core.js"); // Use a dummy module as application-wide namespace for easy access
// Any external modules (f eg node modules) could go here
core.utilityLib = require("node-lib");
// Application modules here
core.myModule = require("./myModule.js");
// core.myModule2 = require("./myModule2.js"); // .. you get the idea
// Our main application module
core.main = require("./main.js");
// Init function to run when DOM/scripts have loaded
var init = function() {
// I have a generic screen module which sets up PIXI renderer depending on device compatibility using Modernizr (or weapon of choice). To keep it simple for the sake of the example, lets just create our renderer directly:
core.renderer = PIXI.autoDetectRenderer(screen.innerWidth,screen.innerHeight,{resolution:window.devicePixelRatio});
// I also use a generic loader module that wraps PIXI.loader, taking a list of assets from a config file. Let's just call PIXI.loader directly for now:
PIXI.loader
.add({name:"myasset",url:"/myasset.png"})
.on('progress', loadProgressFunction)
.once('complete',loadCompleteFunction)
})
.load();
}
window.onload = init; // Tell browser to call init function when loaded
// Optional loading progress bar
var function = loadProgressCallback(e) {
}
// Call when mandatory assets has been loaded
var loadCompleteFunction = function() {
myModule.init(); // Init any mandatory modules, f eg to instantiate a player
main.init(); // Tell our main application/game module that we're ready to do fancy stuff
}
// Method to make things move
var animate = function() {
// Send juice to modules that needs to be juiced (or use a ticker module on per-module basis).
// core.main.animate();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate); // See comment below
}());
Comment: PIXI has an built-in requestAnimationFrame alias that takes care of fallback. If not using PIXI, you could use Paul Irish' gist.
core.js:
module.exports = {}; // Just a dummy object to create a module scope that all the modules
// can use to communicate with each other, without running into circular reference problems
main.js:
// Main application/game module
module.exports = (function() {
// Dependencies
var core = require("./core.js"); // This way we can easily access all the necessary modules
// Exports
var exports = {}; // Everything put into this object will be "public"
// Vars
var stuff = 1; // Module vars
exports.init = function() {
// Application magic starts here :)
}
// Some other public method ...
exports.publicMethod = function() {
}
// Some private method
var privateMethod = function() {
}
return exports; // Expose public functions to other modules
}());
Any additional modules can be organized in pretty much the same way as main.js.
Run browserify dev/app.js > html_root/app.js each time you want to "compile" your bundle (or create a Makefile, gulp-, node-, or webpack-script - whichever you prefer).
i have a question. I have a full app, a lot of view(backbone), models, everything using require, routes etc. When my app is on production i have a single file main.js, like this:
<script data-main="main-gdfgfda.js" src="url/require.js"></script>
But i cant run tasks on my spec.
MY views work like this:
define(function(require){
"use strict";
var $ = require('jquery'),
Backbone = require('backbone'),
ContentFactory = require('views/ContentFactory'),
imagesLoaded = require('imagesloaded'),
ShareView = require('views/ui/ShareView');
var myView = Backbone.View.extend(....
});
And isnted i have some variables in php files.
And i cant running tests in this framework, there is a lot of error because depedency and et, what should i do, what is the best way to acess myView to start testing using jasmine?
If i put in jasmine template it will work? I cant just run SRC folder/*js, because there is a lot of dependecys and etc.
What should i do? Thx
To my understanding Protractor is meant to run on top of WebDriver on a Node.js server and send commands to a selenium server (feel free to correct me if I'm wrong).
Anyway, I was wondering if it is possible to load Protractor into a web page as a JavaScript library (like you would load jQuery for example) so it would be accessible from the JavaScript code in the page.
Can it be done? If so, how? What files do I need? What dependencies?
My goal is to use its capabilities of selecting elements by their various angular bindings, and its waiting for angular events capabilities.
I don't think you can. You can write your own locators, or use directives to isolate element/binding. Another good thing to do would be to dive into the protractor source code and see how they do it. Particularly check out their clientsidescripts.js file. Here is an example of how they find bindings. You would call it like this: findBindings('exampleBinding');
clientSideScripts.findBindings = function() {
var binding = arguments[0];
var using = arguments[1] || document;
var bindings = using.getElementsByClassName('ng-binding');
var matches = [];
for (var i = 0; i < bindings.length; ++i) {
var dataBinding = angular.element(bindings[i]).data('$binding');
if(dataBinding) {
var bindingName = dataBinding.exp || dataBinding[0].exp || dataBinding;
if (bindingName.indexOf(binding) != -1) {
matches.push(bindings[i]);
}
}
}
return matches; // Return the whole array for webdriver.findElements.
};