Is there any example code showing use of cluetip with backboneJS? on click of button i want to show a cluetip popup. But I found no example for this.
Backbone shouldn't change how you use cluetip here is the example
HTML
<script type="text/template" id="template1">
<p> <a id = "houdini"
href = "houdini.html"
title = "|Houdini was an escape artist.|He was also adept at prestidigitation." > Houdini </a></p>
</script>
<div id="container"></div>
JavaScript
var MyView = Backbone.View.extend({
render: function () {
this.$el.html($('#template1').html());
this.$('#houdini').cluetip({
splitTitle: '|',
showTitle: false
});
}
})
var view = new MyView({
el: '#container'
})
view.render();
Related
In this fiddle I have a dummy code of a issue I'm having with $el in a Backbone.Marionette app.
When I define a Layout, even if $el's length is 1, it is not inserted to the page. But everything works if I let the element with its default config, that is, a div.
Here is the code that declares the Application, defines a main region to it, creates a new layout and item views :
var App = new Backbone.Marionette.Application();
App.addRegions({
page: "#page"
});
App.PageLayout = Backbone.Marionette.Layout.extend({
template: "#page-template",
className: "container",
regions: {
header: "#main-header",
content: "#main-content",
footer: "#main-footer"
}
});
App.HeaderView = Backbone.Marionette.ItemView.extend({
initialize: function() {
console.log(this.$el.length); // 1
},
el: "#main-header",
template: "#header-template",
});
App.FooterView = Backbone.Marionette.ItemView.extend({
initialize: function() {
console.log(this.$el.length); // 1
},
el: "#main-footer",
template: "#footer-template"
});
App.ContentView = Backbone.Marionette.ItemView.extend({
initialize: function() {
console.log(this.$el.length); // 1
},
el: "#main-content",
template: "#content-template"
});
App.on("initialize:after", function() {
var pageLayout = new App.PageLayout;
App.page.show(pageLayout);
pageLayout.header.show(new App.HeaderView);
pageLayout.content.show(new App.ContentView);
pageLayout.footer.show(new App.FooterView);
});
App.start();
The templates:
<script id="header-template" type="text/template">
Awesome Inc.
</script>
<script id="footer-template" type="text/template">
<li> Like us on Facebook </li>
<li> Tweet us </li>
<li> Hate us on Hatey.com </li>
</script>
<script id="page-template" type="text/template">
<header id="main-header"></header>
<section id="main-content"></section>
<footer id="main-footer"></footer>
</script>
<script id="footer-template" type="text/template">
<li> Like </li>
<li> Tweet us </li>
<li> Hate </li>
</script>
<script id="content-template" type="text/template">
<h1>Welcome to this World</h1>
</script>
And finally, the main element, in the page:
<main id="page">Loading...</main>
I need the layout to find the region that was rendered (since the App instance has handled that already) and append the related ItemView content to it.
I wonder if I'm missing something really obvious.
Any help would be great!
EDIT
After some pointers by #DavidSulc, I have figured out that I'm unable to do this the way I need.
That means I can't create some regions in the layout, attach some item views, making the item views' el the same as the regions defined on the layout. So I will learn to like the extra div created inside the region. In my opinion, this just causes extra and undesired markup - Why can't I use the region's element as long as it is rendered already?
If there is another way to do this, I would appreciate any ideas.
Here's a working fork: http://jsfiddle.net/hR4Sx/1
A few pointers:
you shouldn't define el attributes in your views
your regions need to be present on the page
the best way to manage layouts is to render their subviews when the layout itself is shown
Shameless plug: my Marionette book covers this type of info (and more!), or you can take a look at the code here if you'd rather learn on your own...
I am trying to create a simple page using backbone.js and bootstrap.js. I am unable to understand how to play with view of backbone.js so that I have my entire collections of model to represent as a list in bootstrap. I tried searching lot of articles on net but couldn't find something easy that I can understand. Can you please suggest some blog or article on how to do following:
<html>
<body>
<script>
Boys = Backbone.Model.extend({
defaults : {
Name : '',
Age : ''
}
});
GardeA = Backbone.Collection.extend({
model : Boys,
url : http://localhost:8080/getGradeAData,
});
GradeAView = Backbone.View.extend({
el: '.container .span12',
initialize: function(){
gradeA = new GardeA();
gradeA.fetch();
this.render();
},
render: function(){
//How can I assign the model collection here
//directly to render in the below bootstrap html page can you please help
this.$el.html('List of students');
}
});
gradeAView = new GradeAView();
</script>
<div class="container">
<div class="hero-unit">Loading</div>
<div class="row">
<div class="span12">
<h3>Projects: </h3>
<ul class="nav nav-tabs nav-stacked">
<!-- need to show list of students here-->
</ul>
</div>
</div>
</div>
</body>
</html>
I've fixed your code (but not tested yet) ..
<html>
<body>
<script>
Boys = Backbone.Model.extend({
defaults : {
Name : '',
Age : ''
}
});
GardeA = Backbone.Collection.extend({
model : Boys,
url : http://localhost:8080/getGradeAData,
});
GradeAView = Backbone.View.extend({
el: '#list-of-grade-a-students',
initialize: function(){
this.gradeA = new GardeA();
this.gradeA.fetch();
this.listenTo(this.gradeA, "sync", this.render);
},
render: function(){
//lets generate html
html = ""
for (var i = 0; i < this.gradeA.length; i++) {
student = this.gradeA.at(i)
html += "<li> student name: " + student.get("name") + " </li> "
}
//lets add that html to view's element
this.$el.html(html);
}
});
gradeAView = new GradeAView();
</script>
<div class="container">
<div class="hero-unit">Loading</div>
<div class="row">
<div class="span12">
<h3>Projects: </h3>
<ul class="nav nav-tabs nav-stacked" id="list-of-grade-a-students">
<!-- need to show list of students here-->
</ul>
</div>
</div>
</div>
</body>
</html>
Some important points:
Added id to your ul element where the list of students have to go. Every view should have the parent element as there el
render method is not some magical thing. You need to create the html in it and then add it to DOM using .html() (or in some cases .append() )
if you call render right after fetch then you have no gurantee that the collection have been fetched from the server. fairly possible that when render is called, you haven't fetched a thing from server. so we use listenTo to bind the view to collection's sync event with your render method. This will ensure that the render is called whenever the collection is successfully synced with server
I have html markup ready, which is not going to change, I want to just add/update variables in this markup.
How do I do this using backbone and underscore?
I have tried the following,
Backbone:
testView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var variables = {reqNumber: 10};
/*This is where I'm having problems, how do I use only variables in my template??
* How do I write this next line
*/
var template = _.template(this.$el.html(), variables);
this.$el.html(template);
}
});
var test_view = new testView({ el: $("div.container") });
HTML:
<a href="#">
<i class="icon-home icon-white"></i>
Requests <span class="badge badge-warning"><%= reqNumber %></span>
</a>
Something like this works. The problem was, you didn't identify where your template was as this.$el points to the view's container, not the template (see the template script).
JS:
$(function() {
var testView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var variables = {'reqNumber': '10'};
var template = _.template($('#test-templ').html(), variables);
this.$el.html(template);
}
var test_view = new testView({ el: $("div.container") });});
});
HTML:
<script id="test-templ" type="text/html">
<a href="#">
<i class="icon-home icon-white"></i>
Requests <span class="badge badge-warning"><%= reqNumber %></span>
</a>
</script>
<div class="container"></div>
I am following the backbone tutorial http://backbonetutorials.com/what-is-a-view/ and in the paragraph Listening for events there is the following phrase:
Remember that event listeners can only be attached to child elements of the "el" property.
and then they are doing the following code:
<script type="text/template" id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
<div id="search_container"></div>
<script type="text/javascript">
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var template = _.template( $("#search_template").html(), {} );
this.$el.html( template );
},
events: {
"click input[type=button]": "doSearch"
},
doSearch: function( event ){
// Button clicked, you can access the element that was clicked with event.currentTarget
alert( "Search for " + $("#search_input").val() );
}
});
var search_view = new SearchView({ el: $("#search_container") });
</script>
But the el property is #search _container which does not have children at all. And they are applying the listener to the input which is the child of search_template
I think I misunderstood something, because it does not make any sense for me. Can anyone right me?
When SearchView.render is called #search _container will have children , the content of the template defined in #search_template
In backbone.js events are delegated, in fact we don't care the HTML is not yet rendered because events will automatically be attached when the view is rendered.
my backbone view looks like this below and is rendered with the jQuery tmpl library. I want to apply a style to one/all/any of the data items for which
active==1. Any ideas on how to do this?
// backbone view
window.CaseView = Backbone.View.extend({
el: $("#main"),
initialize: function() {
_.bindAll(this, 'render');
this.render();
},
iTemplate: $("#tmplCase").template(),
render: function() {
var that = this;
that.el.fadeOut('fast', function() {
$.tmpl(that.iTemplate, that.model.toJSON()).appendTo(that.el);
that.el.fadeIn('fast');
});
return this;
}
});
// html file
<div id="main"></div>
<script id="tmplCase" type="text/x-jquery-tmpl">
<div class="caseInActive">
<span class="title">${title}</span>
<span class="current_status">${active}</span>
</div>
</script>
you can add if statements to your template:
// html file
<script id="tmplCase" type="text/x-jquery-tmpl">
<div {{if active == 1}}class="caseInActive"{{/if}}>
<span class="title">${title}</span>
<span class="current_status">${active}</span>
</div>
</script>
http://api.jquery.com/template-tag-if/