I'm learning backbone and I'm trying to execute this sample code to get the feel.
http://backbonetutorials.com/what-is-a-view/
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</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://backbonejs.org/backbone.js"></script>
<script type="text/javascript">
Rocky = Backbone.Model.extend({
initialize: function(){
console.log('hello world');
}
});
</script>
</body>
</html>
I get this error.
Uncaught type error: Undefined is not a function!
What did I do wrong? I was just trying to print and see if it's printed on my console!
Thanks,
R
Your underscore.js version is too old. Try to use the new version (1.7):
<script src="http://underscorejs.org/underscore.js"></script>
Related
I have the following html file, called a.html
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
</body>
</html>
And the following Javascript file, called a.js
(function() {
$(document).trigger('foo');
}());
When I open a.html, the trigger call in a.js is called, the line
$(document).on('foo', function () {
is called but the alert is never called. What am I doing wrong?
The issue in the above code as per my understanding is a.js is getting loaded before the below script.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
And this event is getting bind after its already been called in a.js.
Try loading a.js below above script like below.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>
place both the scripts at one place in the order as shown it will work..
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<label> rerwnr</label>
<script>
</script>
</body>
</html>
(function() {
$(document).on('food', function () {
alert('test');
});
$(document).trigger('food');
}());
https://codepen.io/pavankumark/pen/WExNEg
Check out the link here for more details.
Try adding the script file a.js at the end of body,
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>
</body>
You need to update your code like this:
You can put script code to a.js file:
Here id demo: https://jsbin.com/fukujad/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(document).on("test", function(){
alert("test triggered");
});
$(document).trigger("test");
});
</script>
</body>
</html>
In a.js you call trigger foo before you defined it,
try to use document ready like this and it will work
$(document).ready(function(){
$(document).trigger('foo');
})
It will wait to load whole document (and all scripts in the document)
I have read some articles for beginners about ReactJs. The article I read showed only code fragments. I'm having trouble with my first component:
full code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return React.DOM.h1("hello world!!");
}
});
React.renderComponent(
HelloWorld,
document.getElementById("content")
);
</script>
</body>
</html>
When I open the page I see embedded:11 Uncaught TypeError: React.renderComponent is not a function
Can anyone please point me in the right direction?
I've also tried this with no luck:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
The problem with your first example is that React.renderComponent is not a function, you need to use ReactDOM.render instead. You should save yourself a lot of effort now and just use create-react-app and use this application. It takes all of the pain out of the tooling that you will need to make React fast to use (webpack hot module reloading). It is extremely simple compared to the average tooling you will need to setup taking any other route and is made by the people that make React. I can tell by the version number of React that you are using, the tutorial you are going of of is very old, a very longtime before Facebook released create-react-app when things were more difficult.
If you are going to go about it inline, use this in your head -
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
Full working example on React 15 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script>
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
EDIT: I see that you use babel-core browser.js, which has been deprecated, remove it and use React directly.
Remove script type and replace everything with:
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
jsbin demo
I tried running BackboneJS HelloWorld program, but I am getting a blank page.
Below is the program.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World in Backbone.js</title>
</head>
<body>
<script src="JS/backbone.localStorage-min.js"></script>
<script src="JS/backbone-min.js"></script>
<script src="JS/jquery.min.js"></script>
<script src="JS/underscore-min.js"></script>
<script type="text/javascript">
var AppView = Backbone.View.extend({
el: '#container',
initialize: function () {
this.render();
},
render: function () {
this.$el.html("Hello World");
}
});
var appView = new AppView();
</script>
</body>
</html>
Note: Downloaded all the required libraries locally.
Link : http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/
You need to include Underscore library's inclusion before including your Backbone library. Please rearrange the <script> inclusions given below.
<script src="JS/jquery.min.js"></script>
<script src="JS/underscore-min.js"></script>
<script src="JS/backbone-min.js"></script>
<script src="JS/backbone.localStorage-min.js"></script>
Also the you need to place html element with an id container because you're referring it in your $el attribute. Hence include the below <div> tag inside your <body></body> tags,
<div id="container"></div>
Here is the working fiddle: https://jsfiddle.net/du2b8vfv/
Hope this helps!
you are changing the value of el in render but not giving the value of el in html code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World in Backbone.js</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id="hh"></div>
<script type="text/javascript">
AppView = Backbone.View.extend({
initialize: function () {
},
render: function () {
this.$el.html("hello");
return this;
}
});
var appView = new AppView();
$("#hh").html(appView.render().el);
</script>
</body>
</html>
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>View Initialization</title>
<script type="text/javascript" src="js/jqyery.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
</head>
<body>
<script>
SearchView = Backbone.View.extend({
initialize: function(){
console.log("View is initialized");
}
});
var search_view = new SearchView();
</script>
</body>
</html>
Firebug is showing me following error:
TypeError: i is not a function
What is wrong with my code?
You appear to have a syntax error. You need to replace:
<script type="text/javascript" src="js/jqyery.js"></script>
with:
<script type="text/javascript" src="js/jquery.js"></script>
Note the spelling mistake in the first <script> has been replaced (jqyery).
Here is my code:
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('hei');
});
</script>
</head>
<body>
<input type="button" id="btn" />
</body>
</html>
I'm getting an "object not supported" error on $(document).ready. I'm also getting this error: Uncaught SyntaxError: Unexpected token ILLEGAL
Your code seems to be correct, it looks like jQuery file is not loaded, verify that it has correct path.
This works:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { alert('hi'); });
</script>
</head>
<body>
</body>
</html>