<script id="entry-template" type="text/x-handlebars-template">
<h2>This is the template</h2>
{{ count }} items
</script>
<script type="text/javascript">
var MyNamespace = {};
$(document).ready(function () {
MyNamespace.Recipe = Backbone.View.extend({
tagName: "li",
render: function () {
return this.$el.text("Chicken Chilly");
}
})
MyNamespace.MyTagView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
var template = Handlebars.compile($("#entry-template").html());
this.$el.html(template);
return this;
},
count: 4
});
var View = new MyNamespace.MyTagView();
$("#content").html(View.el);
});
</script>
I get the output as 0 items , instead of 4 items
In this line:
template: template('entry-template'),
you are generating html of your compiled template and 'entry-template' context object (it's not an id, it's value object to your template). After generating that html you assign it to template property of MyNamespace.MyTagView
Later, in the render method, you are calling this template property (which is html) as it was a function:
this.$el.html(this.template(this));
but it is not a function, but a property containing generated html.
You should assign template like this:
template: template,
Related
Alright people,
I am using the RequireJs text plugin to pull in underscore templates (.html) in my backbone application. Unfortunately my underscore code in my templates are being rendered as plain text.
define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){
var BlogPostIndexView = Backbone.View.extend({
initialize: function () {
this.template = _.template($(Template).html(), {posts : this.collection});
this.render();
},
render: function (Template) {
this.$el.html(this.template);
return this;
}
});
return BlogPostIndexView;
});
Here is my code for my view, you can see i am pulling-in two templates and setting them. However it getting rendered as ...
Globall Coach Blog Posts
<% _.each(posts, function(post){ %>
<%= _.escape(post.title) %>
<% }); %>
Has anybody ever had this issue?
Seems like you're not using the underscore template function correctly. Underscore compiles the string into a function in which you can pipe in data. so your code should look like this:
define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){
var BlogPostIndexView = Backbone.View.extend({
initialize: function () {
this.template = _.template($(Template).html())({posts : this.collection});
this.render();
},
render: function () {
this.$el.html(this.template);
return this;
}
});
return BlogPostIndexView;
But I would refactor this further because you usually want to dynamically re-render with the latest data so I would put the piping in the data to the template in the "render" method instead of "initialize".
So preferably I would do this:
define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){
var BlogPostIndexView = Backbone.View.extend({
initialize: function () {
this.template = _.template($(Template).html())
this.render();
},
render: function () {
this.$el.html(this.template({posts : this.collection}));
return this;
}
});
return BlogPostIndexView;
Turns #mu-is-to-short was correct, requireJs text module returns the the raw html.
Here it `define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){
var BlogPostIndexView = Backbone.View.extend({
initialize: function () {
this.template = _.template(Template);
},
render: function (Template) {
this.$el.html(this.template({posts : this.collection.toJSON()}));
return this;
}
});
return BlogPostIndexView;
});
I don't quite understand how the el works in backbone.
I was under the assumption that el defaulted to body when it wasn't specified. I created a fiddle to illustrate my misunderstanding.
When I specify the el everything works fine. Unspecified returns nothing though.
http://jsfiddle.net/9R9zU/70/
HTML:
<div class="foo">
<p>Foo</p>
</div>
<div class="bar">
</div>
<script id="indexTemplate" type="text/template">
Bar?
</script>
JS:
app = {};
app.Router = Backbone.Router.extend({
routes: {
"" : "index"
},
index: function() {
if (!this.indexView) {
this.indexView = new app.IndexView();
this.indexView.render();
} else {
this.indexView.refresh();
}
}
});
app.IndexView = Backbone.View.extend({
// el: $('.bar'),
template : _.template( $('#indexTemplate').html() ),
render: function() {
this.$el.html(this.template());
return this;
},
refresh: function() {
console.log('we\'ve already been here hombre.')
}
});
var router = new app.Router();
Backbone.history.start();
If you do not specify element in the Backbone view, it will create an html node in memory, render the view into it and bind all event handlers based on that node. Then you will need to manually append it to the dom like this:
$('body').append(this.indexView.render().el);
I'm displaying a table of categories with Backbone. I created two views:
RowView (containing a single tr)
TableView (containing table structure)
The definitions:
RowView = Backbone.View.extend({
el: "#content table tbody",
initialize: function() {
this.render();
},
render: function(){
var params = { name: this.model.get('name'), route: this.options.route };
var template = _.template( $("#rowTemplate").html(), params);
this.$el.append(template);
},
events: {
"click #name": "clickHandler"
},
clickHandler: function( event ) {
console.log('Browse subcategories of ' + this.model.get('name'));
}
});
TableView = Backbone.View.extend({
el: "#content",
initialize: function(){
this.render();
},
render: function(){
var row = new this.collection();
var that = this;
row.fetch({
success: function() {
console.log('Collection fetch succeeded');
var params = { title: that.options.title,
counter: row.at(0).get('counter'),
route: that.options.route
};
var template = _.template( $("#tableTemplate").html(), params);
that.$el.html( template );
// RowView's are created by iteration here
for(var x = 1; x < row.length; x++) {
var params = { model: row.at(x), route: that.options.route };
var view = new RowView(params);
}
}
});
}
});
As you can see, I've attached a click event at the RowView.
RowView template:
<script type="text/template" id="rowTemplate">
<tr>
<td id="name" class="fill"><%= name %></td>
<td>Editar</td>
</tr>
</script>
Clicking any #name triggers the handler in all instance of the view. So when clicking one category I get:
Browse subcategories of category1 127.0.0.1:68
Browse subcategories of category2 127.0.0.1:68
etc...
As far as I know, that's because all RowView's are delegated to the same el.
The first thing I though about was adding the category name to the rowTemplate and compare the value in the DOM with the value in the view to see which one actually triggers the event.
But that solutions look really ugly. What's the correct way of accomplishing this in Backbone?
EXTRA: Is it considered better if I only create one view, and iterate in the template to generate the rows?
EDIT: I think the provided code is enough. Otherwise I can add them.
you can modify RowView like this :
RowView = Backbone.View.extend({
container: '#content table tbody',
tagName: 'tr',
initialize: function() {
this.render();
},
render: function() {
var params = {
name: this.model.get('name'),
route: this.options.route
};
var template = _.template($("#rowTemplate").html(), params);
this.$el.html(template).appendTo(this.container);
},
events: {
"click .fill": "clickHandler"
},
clickHandler: function(event) {
console.log('Browse subcategories of ' + this.model.get('name'));
}
});
and RowView template:
<script type="text/template" id="rowTemplate">
<td class="fill"><%= name %></td>
<td>Editar</td>
</script>
Backbone.js will create a tr element. then this.$el.html(template).appendTo(this.container) fill the tr element with template and append to #content table tbody.
just like that, RowView's events be delegated on RowView's el, not #content table tbody.
You have more than one element with the same id on your page, due to all of your rows having the
<td id="name" class="fill"> element.
Element IDs should be unique within your document.
One solution would be to distinguish the rows in your template, and use events as a function to set the proper ID.
Template:
<script type="text/template" id="rowTemplate">
<tr>
<td id="name-<%= name %>" class="fill"><%= name %></td>
<td>Editar</td>
</tr>
Events function:
events: function(){
_events = {};
_events["click #name-" + this.model.get('name')] = "clickHandler";
return _events;
}
Try this
RowView = Backbone.View.extend({
container: '#content table tbody',
tagName: 'tr',
// initialize: function() {
// this.render();
// },
render: function() {
var params = {
name: this.model.get('name'),
route: this.options.route
};
var template = _.template($("#rowTemplate").html(), params);
this.$el.append(this.template);
},
events: {
"click .name": "clickHandler"
},
clickHandler: function(event) {
console.log('Browse subcategories of ' + this.model.get('name'));
}
});
RowView template (no need for identifying each row view):
<script type="text/template" id="rowTemplate">
<td class="name"><%= name %></td>
<td>Editar</td>
</script>
Then the table view:
...
that.$el.html( template );
// RowView's are created by iteration here
for(var x = 1; x < row.length; x++) {
var params = { model: row.at(x), route: that.options.route };
var view = new RowView(params);
that.$el.find('tbody').append(view.el);
view.render()
}
...
I have two simple views, one with a button that creates a view and append it to the page. The new view consists of a single list item with a link and an event to I need to bind to each list item. I think the problem here is the el object: What I have been reading the el object should be created automatically when it's not defined on construction of the view? See this fiddle
HTML:
<div id="main">
<button type="button" class="add">Add view</button>
<ul id="tasks" />
</div>
<script id="view-template-new-task" type="text/html">
<li>Task</li>
</script>
JS:
var TaskView = Backbone.View.extend({
events: {
'click a.fire': 'fire'
},
fire: function() {
alert('fire');
},
initialize: function() {
this.template = _.template($('#view-template-new-task').html());
},
render: function() {
$('#tasks').append(this.template());
}
});
var View = Backbone.View.extend({
events: {
'click button.add': 'addView'
},
addView: function(e) {
var task = new TaskView();
task.render();
}
});
$(function() {
var view = new View({
el: $('#main')
});
});
Backbone automatically delegates events to the view element. As is, the el in your TaskView would point to an unattached div (the default el created by Backbone) and not to an element in your list.
The cure is simple : create your subview with its el set to a correct DOM node by setting a tagName to li and appending this element in your main view.
var TaskView = Backbone.View.extend({
tagName: 'li',
events: {
'click a.fire': 'fire'
},
fire: function() {
alert('fire');
},
initialize: function() {
this.template = _.template($('#view-template-new-task').html());
},
render: function() {
this.$el.html(this.template());
return this;
}
});
var View = Backbone.View.extend({
events: {
'click button.add': 'addView'
},
addView: function(e) {
var task = new TaskView();
this.$('#tasks').append(task.render().el);
}
});
And an updated Fiddle http://jsfiddle.net/BLP6J/31/
Please see the following fiddle.
HTML
<script id="person" type="text/x-handlebars-template">
<div>Title : {{title}} </div>
<div>First Name : {{firstname}}</div>
<div>Last Name : {{lastname}}</div>
</script>
<div id="people"></div>
JS
(function ($) {
var personTemplate= Handlebars.compile($("#person").html());
var Person= Backbone.Model.extend({
title: null,
firstname : "",
lastname : ""
});
PersonView = Backbone.View.extend({
tagName: "div",
template: personTemplate,
render: function () {
$(this.el).html(this.template(this.model));
return this;
}
});
$(document).ready(function () {
var AppView = Backbone.View.extend({
initialize: function () {
var passView = new PersonView (
{ model: new Person({ title: "Mr",
firstname : "John",
lastname : "Smith"})
});
$('#people').append(passView.render().el.outerHTML);
}
});
var App = new AppView();
});
})(jQuery);
I've created a basic mode and view, but the parameters for the view are not being picked up by the template. If i set the value directly on the person model, it finds them. But not if i set them via a new instance of the mode (or even if I use the init methods to .set() them.
What am I doing wrong?
In order to get a object for use with your template you need to call your model's toJSON method.
For example
PersonView = Backbone.View.extend({
tagName: "div",
template: personTemplate,
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
If you inspect one of your models in Firebug (or just output it to the console) you'll notice that there are a lot more attributes then just the ones you specified, and that the values you specify are actually contained under a property attributes, calling toJSON returns an object with the models "values" that you specified.