I'm trying to do a very simple hello world with Backbone. After reading docs and examples I think this should work, but doesn't do anything when I click:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript">
var AppView = Backbone.View.extend({
events: {
'click #new': 'createNew'
},
//CREATE
createNew: function(){
alert('yea');
}
});
var app_view = new AppView();
</script>
</head>
<body>
new
</body>
</html>
Am I missing something? What could be wrong?
You have two problems here:
A Backbone view is tied to a specific DOM element. You have to attach your view to the DOM before it can respond to events.
The DOM may not be ready when your script executes, you have to wrap the view creation code with $(document).ready.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript">
var AppView = Backbone.View.extend({
events: {
// the element IS the link, you don't have to specify its id there
'click': 'createNew'
},
//CREATE
createNew: function(){
alert('yea');
}
});
$(document).ready(function() {
// attach the view to the existing a element
var app_view = new AppView({
el: '#new'
});
});
</script>
</head>
<body>
new
</body>
</html>
Related
I'm getting started with backbone.js and i want to build a template, containing only a html button, with my model attributes. So I defined a template in my html page as below:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
</body>
</html>
and I'm trying to build my template in my view:
var Bouton_View= Backbone.View.extend({
view_template: _.template( $('#button_template').html() ),
events:{
'click':'onClick'
},
initialize: function(){
this.$el=('#here');
},
render: function(){
this.$el.html(this.view_template(this.model.attributes));
return this;
},
onClick: function(){
var increment=0;
increment=this.Model.get("number_of_click")+1;
this.Model.set({"text":increment});
this.Model.set({"number_of_click":increment});
this.render();
}
});
but when I run the page in the browser this error message show up:
I'm pretty sure the js file is not wrong because I've try this with another html file and it worked. So what is wrong with my template? thanks in advance
Why so?
Spoiler: the underscore templating engine is fine in this case.
This example's problem is that the code which describes your Bouton_View, which probably lies here:
<script src="backbone_test5.js"></script>
is executed before the DOM parser reaches
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
element. This can be described as
Load backbone_test5.js file and execute its contents
Execute _.template( $('#button_template').html() )
Search DOM for element with id="button_template"
None found
Execute .html() function on a non-existent $ element => this results in null
Execute _.template(null) => this gives you the error you mentioned
How to fix?
There are several ways to do that.
HTML-only. Re-order the code so that DOM elements exist when queried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</body>
</html>
With some js-code. You can wrap the contents of the backbone_test5.js file with the $(...) so that it only executes once the DOM content is ready:
$(function () {
var Bouton_View = Backbone.View.extend({ /* ... */ });
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</head>
<body>
<h1 id="popup">dfdfs</h1>
</body>
</html>
i have a simple javascript which shows alert when the h1 id exits ,but i am not getting the alert message.code in jquery also can help.
Put your <script> tag at the end of the body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Write your script after the element so that it runs after element is present. See the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Plunkr for the same is: "http://plnkr.co/edit/0fznytLHtKNuZNqFjd5G?p=preview"
Because, you're executing the script before document is completely loaded, the element #popup is not found.
Use DOMContentLoaded
Use DOMContentLoaded to check if the DOM is completely loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
if (document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
Using jQuery ready
Using jQuery, you can use ready method to check if DOM is ready.
$(document).ready(function() {
if ($("#popup").length) {
window.alert("hi");
}
});
Moving script to the end of body
You can move your script to the end of body.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
// Move it here
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Your script is above the h1 element that you're trying to retrieve. Because of this, it is being run before the element actually exists.
Either move the script to the bottom of the page, or wrap it in a jQuery ready block. And consider moving it to an external file.
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
try this easy way. no need of jquery.
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if(document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
It is good practice to use the <script> tags in <body> because it improves the performance by loading it quicker.
And then use
<body>
<script>
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
</body>
Below code gives you solution
$(document).ready(function() {
if (document.getElementById("popup")) {
window.alert("hi");
}
});
Ok I am probably doing something very silly that is preventing me from getting this to work, but here goes anyway:
I am trying to learn how to work with knockout and am trying to build a select list with options defined as an observable array. Here is the code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="./knockout-3.0.0.js"></script>
<script type="text/javascript">
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
</script>
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
</body>
</html>
This is basically right out of one of their own examples but I cannot get it to work. The select list is not populated at all. I am using the latest version of Chrome (31.0.1650.57) and have looked in developer tools to see if there are issues. I have confirmed that everything is loading properly (ie: knockout is loading, the html is valid) still nothing. Am I missing something obvious?
here is the fiddle:
http://jsfiddle.net/janarde/r9pCK/
EDIT
Thanks to PW Kad It turned out to be that the DOM wasn't loaded before the binding:
EDIT
Thanks to Ek0nomik for pointing out the need to put knockout stuff after the markup.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="./knockout-3.0.0.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
<script type="text/javascript">
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
You need to make sure you call applyBindings. Here is a working jsFiddle: http://jsfiddle.net/b4wHQ/
HTML
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
Javascript
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
Are you sure that the DOM is loaded before you are trying to apply bindings?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./knockout-3.0.0.js"></script>
</head>
<body>
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
<script type="text/javascript">
$( document ).ready(function() {
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
});
</script>
</body>
</html>
Recently, i have been writing a single page app using backbone. When i try to create a animation like throwing a card but i can't use jquery to do this. I found that after backbone view call this render(). I try to select DOM element by jquery and modify it. It didn't change anything? Does anybody know this?
<!DOCTYPE html>
<head>
<style type="text/css">
#logo {
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/template">
<image id="card" src='10.png'/>
<br/>
<input type="button" id="btn" value="di chuyển"/>
</script>
<script src="move.js"></script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
</body>
</html>
(function($){
var aniView = Backbone.View.extend({
template: _.template($('#template').html()),
events:{
"mouseover input[type=button]":"moveCard"
},
moveCard:function () {
alert('di chuyển');
move('#card')
.add('margin-left', 100)
.end();
},
render:function () {
$('#container').html(this.template());
}
});
var a = new aniView();
a.render();
})(jQuery);
Thanks!
My code used to work until I dunno what i changed, I started everything from scratch yet it still doesn't show the tooltip, can someone tell me what's wrong with the code?
or even better, is there any other (easier) way to implement a tooltip ?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.js"></script>
<script type="text/javascript">
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
})
</script>
</body>
</html>
Aren't you missing the onload?
<script type="text/javascript">
$(function() {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
Edit: the code above most definitely works, see jsfiddle
Make sure your qtip.js and qtip.css are loaded and recent
Try this instead:
$('a').qtip({
content: $('#jj').text()
});
Or do what the comment said and clone the element -- you'll probably have to show it explicitly:
$('a').qtip({
content: {
text: $('#jj').clone().show()
}
});
you need to put your qtip javascript inside a document ready.
$(function() {
$('a').qtip({
content: {
text: $('#jj').clone()
}
});
});
two things that you can try
move the scripts to your head section
wrap the javascript/jquery code inside the ready handler
$(document).ready(function(){
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="Scripts/qTip/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/qTip/jquery.qtip.js"></script>
<script type="text/javascript">
$(function () {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
</body>
</html>