Getting started with backbone - backbone.js

Amateurish this question might be but none the less could use a hand. Just got backbone out of the packaging and started the hello world example but cant seem to get it up and running. Any chance someone could tell me why Im not seeing the results of this?
(function($){
var ListView = Backbone.View.extend({
el: $(body), //attaches this.el to an existing element
initialize: function(){
_.bindAll(this, 'render'); //fixes loss of context for this within elements
this.render(); //not all views are self-rendering. This is one.
},
render: function(){
$(this.el).html("<ul><li>Hello World!</li></ul>");
}
});
var listVew = new ListView();
})(jQuery);
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Hello Backbone </title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="backbone.js" type="text/javascript"></script>
</body>
</html>

I tried your code in a jsfiddle and got this error: Uncaught ReferenceError: body is not defined
use the string 'body' as your view's el selector
This works: http://jsfiddle.net/PeGW6/
Also note you are using a very very old version of backbone. Upgrade to the most recent build.

Related

Why doesn't angular.element('<p>').css('color', 'red'); work?

Why doesn't angular.element('<p>').css('color', 'red'); work?
angular
.module('app', [])
.controller('MainController', MainController)
;
function MainController() {
// angular.element('p').css('color', 'red'); ERROR. Now I see what the docs meant by "HTML String"
// angular.element('<p>').css('color', 'red'); No error, but doesn't work
angular.element(document.querySelector('p')).css('color', 'red'); // Works
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='MainController as vm'>
<p>test</p>
</body>
</html>
According to the docs, angular.element takes in an "HTML string or DOMElement to be wrapped into jQuery."
The 2nd example doens't error out because you are in fact passing an HTML string. This will cause angular.element to return a newly created jQuery object instead of acting on an existing object.
You can illustrate this by assigning the new element to a variable:
var newElement = angular.element('<p>');
This is equivalent to the behavior you would find in full jQuery:
var newElement = $('<p>');
The last example uses querySelector which returns the actual HTML DOM element. This is what Angular needs to operate on that existing element (unless you've included jQuery - then you can use selectors like you would in jQuery/example 1).

Reference error Angular is not defined

I am trying to learn angular, and I am stuck in first chapter :-(
I am using angular 2.0, but when i try to create a module I get error "angular is not defined".
My plunker: Plunker:
my script:
(function() {
console.log("Hello");
var app = angular.Module("gitHubViewer", []);
app.controller("MainController", MainController);
var MainController = function($scope) {
$scope.message = "Hello World!";
};
}());
HTML:
<html ng-app="gitHubViewer">
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular.js" data-semver="2.0.0-alpha.20" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Can some body please help, is this a wrong way of creating module?
Thanks
Please check https://code.angularjs.org/2.0.0-alpha.20/angular.js link.
Display 404 Not Found.
Please download angularJS From https://angularjs.org/ and add it in your project.
I've not looked into Angular 2 very much but your code looks more like Angular 1 to me.
Angular 2 apps are bootstrapped in a very different way using ES6 components (specifically System). It should look more like this:
<html>
<head>
<title>Angular 2 Hello World!</title>
<script src="/dist/es6-shim.js"></script>
</head>
<body>
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*': '/angular2/*.js', // Angular
'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
</body>
</html>
This code was taken from this excellent tutorial: Getting Started with Angular 2.0.

AngularJS example - Uncaught Error: No module: myapp

I'm trying to run a simple hello world example and can't get it to work. What am I doing wrong here? I keep getting 'Uncaught Error: No module: myapp' error in the chrome console.
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<title>Angular App</title>
</head>
<body>
<div ng-controller="TextController">
<h1>Angular App says {{greeting.message}}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"/>
<script type="text/javascript">
var myModule = angular.module('myapp',[]);
myModule.controller("TextController", function($scope){
$scope.greeting.message = "hello world!";
});
</script>
</body>
</html>
Here's the JSFiddle link: http://jsfiddle.net/HdR2c/1/
You can't self close script tags first of all so you need to change your angular include to be the following:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
Then change your $scope.greeting.message var to something like $scope.greetingMessage. The way you are currently doing it you are looking for an attribute called "message" in a greeting object.
You can't self-close script tag. This is wrong:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"/>
You should close it this way:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
Make sure your module definition have the argument [] blocks in it, even though they are empty.
angular.module('module_name',[]);

Underscore templating not working for simple message with Backbone.js

Just trying to make Backbone.js display a simple message on index.html...It fails if I do try with underscore but it will append a message to the quiz_question div element if I try to do something like
questionTemplate: _.template( '<div>Hello <%= msg %></div>')
...What am I missing?
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="quiz_question">
<input id="back_id" type="button" value="Back">
<input id="next_id" type="button" value="Next">
</div>
<script type="text/template" id="qtemplate"></script>
<script src="js/jquery-2.0.2.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>
<script src="js/backbone.localStorage.js"></script>
<script src="js/questionmodel.js"></script>
<script src="js/questioncollection.js"></script>
<script src="js/questionview.js"></script>
<script src="js/app.js"></script>
<script type="text/template" id="qtemplate">
<div><%= msg %></div>
</script>
</body>
</html>
app.js
var app = app || {};
$(function() {
// Kick things off by creating the **App**.
new app.QuestionView();
});
questionview.js
var app = app || {};
app.QuestionView = Backbone.View.extend({
// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
el: '#quiz_question',
// Our template for the line of statistics at the bottom of the app.
questionTemplate: _.template( $('#qtemplate').html() ),
//questionTemplate: _.template( '<div>Hello <%= msg %></div>'),
// Delegated events for displaying new questions, and clearing existing ones
events: {
'click #back_id': 'displayPreviousQuestion',
'click #next_id': 'displayNextQuestion'
},
// The QuestionView listens for changes to its model, re-rendering. Since there's
// a one-to-one correspondence between a **Question** and a **QuestionView** in this
// app, we set a direct reference on the model for convenience.
initialize: function() {
//app.Questions.fetch();
this.render();
},
render: function(){
// render the function using substituting the varible 'who' for 'world!'.
this.$el.append(this.questionTemplate({msg: "hope floats"}));
//***Try putting your name instead of world.
},
displayPreviousQuestion: function() {
},
displayNextQuestion: function() {
}
});
Your page looks like this:
<script src="js/questionview.js"></script>
<!-- ... -->
<script type="text/template" id="qtemplate">
<div><%= msg %></div>
</script>
so questionview.js will be loaded and executed before #qtemplate is in the DOM. Inside questionview.js you have this:
app.QuestionView = Backbone.View.extend({
//...
questionTemplate: _.template( $('#qtemplate').html() ),
so _.template( $('#qtemplate').html() ) will be executed while questionview.js is being loaded and that happens before there is a #qtemplate available. The result is that you end up doing _.template(undefined) and that doesn't do anything useful.
You can wrap the view definition in a $(function() { ... }) to delay its execution until after the DOM is ready or you could delay creating the template function until you need it with something like this:
initialize: function() {
this.questionTemplate = _.template($('#qtemplate').html());
}
in your QuestionView. There are variations on those two basic approaches but that should get you started.
Above answer explain cause very well, but if you want to do quick fix, moving template tag above other script would fix the problem.

backbone.js doesn't fire click event on DOM element

I can't fire the click event on DOM element.
This is my js file: app.js. I'm pretty sure I'm missing something or doing wrong here but I can't figured out where.
var App = Backbone.View.extend({
el: $('body'),
initialize: function() {
_.bindAll(this, 'sayHello');
},
events: {
'click .link': 'sayHello'
},
sayHello: function(e) {
alert('Hello!');
}
});
var app = new App();
and this is my HTML file: index.htm.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<script type="text/javascript" src="assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="assets/js/underscore-min.js"></script>
<script type="text/javascript" src="assets/js/backbone-min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
</head>
<body>
Click here!
</body>
</html>
This was admittingly trickily. Think through the code logically. Your JS script is in your head.
The jQuery selector el: $('body') does not exist yet. (JavaScript executes immediately). Try doing el: 'body'.
You have to initialize your view on dom load event.
var App = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'sayHello'); // you don't need this for your code to work
},
events: {
'click .link': 'sayHello'
},
sayHello: function(e) {
alert('Hello!');
}
});
$(function(){
var app = new App({el: $("body")});
});

Resources