I'm learning Backbonejs and I'm really confused with linking external JS files. So, if I write Backbone script in HTML document between everything works fine. But if I add a link in HTML to JS file it doesn't work. I have tested jQuery in this file and it works fine, it seems like only Backbone.js scripts doesn't work. So, the main question is:
How do I link external JS files where I'm using Backbone.js to my HTML file?
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<script src="testingscript.js"></script>
<title>Backbone for beginners</title>
</head>
<body>
<div id="container">Loading...</div>
<script>
var AppView = Backbone.View.extend({
el: $('#container'),
// template which has the placeholder 'who' to be substitute later
template: _.template('<h3>Hello <%= who %></h3>'),
initialize: function () {
this.render();
},
render: function () {
// render the function using substituting the varibile 'who' for 'world'
this.$el.html(this.template({who: 'world!'}));
}
});
var appView = new AppView ();
</script>
</body>
</html>
Greetings!
There is no special magic to load other js files in the same HTML file that backbonejs is used.
I would make sure that your 'testingscript.js' file is in the right path and get loaded properly. You can look at the console in your web-browser (From FireBug if you use fireFox, or 'Inspect Element' if Chome is used).
Once you confirm that the file is loaded properly, things should work as I don't see you have any unusual in your code.
Good luck!
<script src="testingscript.js"></script>
Related
I was just going through the code of a online reppositoty using angular.js and came across the following example:
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<script src="js/ol.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
<script src="js/angular-openlayers-directive.js"></script>
<link rel="stylesheet" href="css/ol.css" />
<link rel="stylesheet" href="css/angular-openlayers-directive.css" />
<script>
var app = angular.module('demoapp', ['openlayers-directive']);
</script>
</head>
<body>
<openlayers lat="39.92" lon="116.38" zoom="10" height="400" custom-layers="true">
<ol-marker lat="39.92" lon="116.38" message="Here is Beijing. Dreamful place.">
</ol-marker>
</openlayers>
<h1>Adding a layer with markers with no javascript example</h1>
</body>
</html>
Now there is the below part:
var app = angular.module('demoapp', ['openlayers-directive']);
I am not quite sure about, the above line, I read about dependency injection HERE. But i am not quite sure what is the purpose of the above line ? what is it really doing ?
I have gone though a few online examples that have code like the below:
// Define a new module for our app. The array holds the names of dependencies if any.
var app = angular.module("instantSearch", []);
(See the comment) , Ok but i still don't get what ['openlayers-directive'] , is doing ?
It declares a module named 'demoapp' that is dependant on a module named 'openlayers-directive'. This, basically, means that all the angular components (directives, services, filters, controllers, constants, etc.) defined in the module 'openlayers-directive' will be usable in your angular application.
Read the documentation.
openlayers-directive is an angular module. When you are creating your demo app module, you are including a reference to the openlayers module.
So if you wanted to use other modules in your demo app module you would also include them here, where you are declaring your module for the first time.
For example:
var app = angular.module('demoapp', ['openlayers-directive', 'anotherModule', 'yetAnotherModule']);
In your code you can then pass in any services from these modules by simply including them as parameters.
So if you have a demoController you could pass in a service from one of the included modules and use it.
For example
angular.module('demoApp').controller('demoContoller', function($scope, anotherModuleService)
{
$scope.someFunctionFiredFromController = function()
{
//I have access to this service because the module it
//belongs to was referenced by the demoApp module, and the
//service was injected into the controller
anotherModuleService.doSomethingRelevant();
}
});
Backbone.Router.extend is giving me the error: "extend" cannot be used on
undefined
Nodejs and express is also used in this project.
but i have not mentioned anythin related to backbone in app.js
Below is my index.html and main.js.
I have a feeling, the jquery,underscore and backbone files may not be loading properly,due to which this error is happening
Kind of beginner in backbone.Any help is greatly appreciated
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="javascripts/jquery.min.js"></script>
<script src="javascripts/json2.js"></script>
<script src="javascripts/underscore-min.js"></script>
<script src="javascripts/backbone-min.js"></script>
<script src="javascripts/main.js"></script>
</head>
<body>
<h1>< title </h1>
<p>Welcome to world of html</p>
</body>
</html>
main.js
$(document).ready(function(){
var Theater = {
Models: {},
Collections: {},
Views: {},
Templates:{},
Routers:{}
}
Theater.Models.Movie = Backbone.Model.extend({});
Theater.Collections.Movies = Backbone.Collection.extend({
model: Theater.Models.Movie,
url: "/json",
initialize: function(){
console.log("Movies initialize")
}
});
Theater.Routers = Backbone.Router.extend({
initialize:function(){ console.log("defaultRoute");},
routes: {
"": "defaultRoute"
},
defaultRoute: function () {
console.log("defaultRoute");
}
});
console.log("gonna call approuter");
var appRouter = new Theater.Routers();
Backbone.history.start();
});
A large number of tiny tweaks and micro bugfixes, best viewed by looking at the commit diff. HTML5 pushState support, enabled by opting-in with: Backbone.history.start({pushState: true}). Controller was renamed to Router, for clarity. Collection#refresh was renamed to Collection#reset to emphasize its ability to both reset the collection with new models, as well as empty out the collection when used with no parameters.
Backbone change log of 0.5.0
http://backbonejs.org/
Backbone's Router was called Controller and renamed to Router when it got version 0.5
Simply replace your Backbone and Underscore files into newer version or use Controller instead. then your code should work.
I strongly recommend to update your Backbone file due to bugs which Backbone used to have.
I have looked at a lot of examples related to setting up the app, and everything I'm doing seems correct but I'm still getting the error above. Here's my setup.
_Layout.cshtml
<!DOCTYPE html>
<html data-ng-app="homePricesApp">
<head>
<script src="libs/angular.1.0.8.min.js"></script>
<script src="controllers.js"></script>
<title></title>
</head>
<body >
<div data-ng-controller="PricesController"></div>
</body>
</html>
controllers.js
var app = angular.module("homePricesApp", []);
app.controller('PricesController', ['$scope', function ($scope) {
$scope.items = [];
} ]);
So what I'm doing is creating a new homePricesApp module, and when the page is loaded, because I have data-ng-app="homePricesApp", it initializes the homePricesApp module. I then create the controller. But when the page loads I get the error:
"Argument 'PricesController' is not a function, got undefined".
Any ideas would be greatly welcome.
UPDATE
After much reading I came across the idea of manually bootstrapping the app using the code below, which worked, as in it now hits my controller, but the error is being thrown by angular.js before it hits the controller code.
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('pricesResults'), ['homePricesApp']);
});
Your code works for me.
Your angular is loaded correctly? try this
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js
This one will be most probably easy question. I'm very new to Web programming and I was given a task to learn Ext JS (I don't know anything about it they just told me to learn this, may be there are some better frameworks out there, but I don't know). So I started with a very simple example.
This is the Ext JS code
Ext.define('Cookbook.Vehicle', {
config: {
Manufacturer: 'Aston Martin',
Model: 'Vanquish'
},
constructor: function(config) {
// initialise config object
this.initConfig(config);
},
getDetails: function() {
alert('I am an ' + this.getManufacturer() + ' ' + this.getModel());
},
});
var myVehicle = Ext.create('Cookbook.Vehicle');
myVehicle.getDetails(); // alerts 'I am an Aston Martin Vanquish'
And this is the HTML Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/extall.css" />
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="Chapter 1.js"></script>
</head>
<body>
<h2 id="h2">Nothing seem to work</h2>
</body>
</html>
I suppose that Ext JS code should run after the .hmtl file is launched right? But the thing is, nothing happens. Just a plane page which says Nothing seems to work. Is there a problem in my code? Or is there a special thing to be done to run Ext JS code. I don't really know what to do.
I want to inject an old style, procedurally built string into a DIV element that's created in a standard ExtJS 4 MVC application, and I'm having a hard time wrapping my head around how I'm supposed to leverage dynamic loading.
So say I have this function by itself in a javascript file called "createHtml.js":
function fillDiv(strDivName) {
document.getElementById(strDivName).innerHTML = "<h1>TEST</h1>";
}
Elsewhere, in my MVC ExtJS 4 app (so in an object referenced within app.js, I have the following:
myPanel = Ext.create('Ext.panel.Panel', {
title: 'Map',
html: '<div style="width:100%; height:100%" id="map"></div>'
});
In my index.html page, I include a reference to createHtml.js. In my app.js file, I have something like the following:
( function() {
Ext.Loader.setConfig({
enabled : true,
paths : {
MyJive: 'media/js/ext/MyCom/MyJive',
}
});
Ext.onReady( function() {
var urlparams = document.URL.split('?')[1];
var param = Ext.urlDecode( urlparams ? urlparams : '' );
var pcard = Ext.create( 'MyJive.view.MyUI',{
param1 : param.param1,
param2: param.param2
});
Ext.create( 'Ext.container.Viewport', {
layout: 'fit',
items: [pcard]
});
});
})();
Now if I attach a listener to a button somewhere on MyUI and have it call fillDiv('map'); I get a Uncaught ReferenceError: fillDiv is not defined error.
If I put fillDiv not in its own file (createHtml.js) but MyUI.js (referenced by pcard, above), I'm golden. So I know it's not a super-stupid issue like having the div id wrong or some wacky, invalid innerHTML value.
I would have thought the app would know about fillDiv() because fillDiv()'s parent file is in index.html's javascript includes, but fine, createHtml.js isn't being dynamically loaded. I've got that, I guess.
But how do I tell app.js that my function exists in a file outside of its bounds?
(Now, "IRL", I've got fillDiv creating a complicated piece of html via OpenLayers so that we can display a map identified by param1 and param2 embedded in the ExtJS form, but I've gone to this simpler setup to try and figure out what I'm doing wrong.)
EDIT: Added index.html. createHtml.js contains the fillDiv() method. Note that the DIV that takes the map isn't in the index.html; it's, again, defined in an ExtJS Panel.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Project</title>
<link rel="stylesheet" type="text/css"
href="media/js/ext/ext-4.0/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="media/js/ext/MyCom/MyJive/css/main.css" />
<script type="text/javascript"
src="media/js/ext/MyCom/MyJive/createHtml.js"></script>
<script type="text/javascript"
src="media/js/ext/MyCom/MyJive/OpenLayers-2.11/OpenLayers.js"></script>
<script type="text/javascript"
src="media/js/ext/ext-4.0/ext-all-debug-w-comments.js"></script>
<script type="text/javascript"
src="media/js/ext/MyCom/MyJive/app.js"></script>
</head>
<body>
<div id="divParent"></div>
</body>
</html>
EDIT: Adding app.js:
( function() {
Ext.Loader.setConfig({
enabled : true,
paths : {
MyProj: 'media/js/ext/MyCom/MyProj',
OpenLayers: 'media/js/ext/MyCom/MapJive/OpenLayers-2.11',
MyComExt : 'media/js/ext/MyCom/MyComExt'
}
});
Ext.onReady( function() {
var urlparams = document.URL.split('?')[1];
var param = Ext.urlDecode( urlparams ? urlparams : '' );
var pcard = Ext.create( 'MyProj.view.MyProj',{
param1: param.p1,
param2: param.p2
});
Ext.create( 'Ext.container.Viewport', {
layout: 'fit',
items: [pcard]
});
});
})();
I would leave just a comment, but I don't have enough points for that.
You didn't include a index.html file with imports of your createHtml.js and app.js files. But the first thing I would check is that your createHtml.js import is placed above app.js.