I am using Backbone.js and underscore.js with Requirejs. However when i try to load my view template, it gives me (8 out of range 6) error in Underscore.js line 8.
Please tell me what i am doing wrong.
Here is my code:
var imageView = new ImageView({model: item});
define(['jquery','underscore','backbone','imageview','text!../templates/template_image.html'],
function($, _, Backbone, ImageView, template){
var ImageView = Backbone.View.extend({
initialize: function(){
this.showImageTemplate = _.template(template);
},
render: function(){
var html = this.showImageTemplate(this.model);
this.$el.html(html);
return this;
}
});
return ImageView;
});
And my Template file:
<img id="frameImg" src="<%= DocumentPath %>/<%= DocumentName %>" alt="image" title="image"/>
You're passing the raw Backbone.Model object as data to your template, so you're working with something like
{
_changing: false,
_pending: false,
_previousAttributes: {}
attributes: {
DocumentPath: "",
DocumentName: ""
}
...
}
You probably only want the attributes, which you can obtain via model.toJSON for example. Try :
var html = this.showImageTemplate(this.model.toJSON());
Related
I am using lodash templates to render html templates client side. There are many html templates which are being repeated. So, I decided to call the repeating template in another template. For example:
dummy.html
<%= _.template(templates['button'])({ title: "click me" }) %>
The above approach works but as I am calling _.template to render a button again and again, I thought to make a global function as shown below:
dummy.js
var sb = {
setButton: function(data){
data = data || {};
return _.template(templates['button'])(data);
},
/* other functions */
}
and then call in the dummy.html as:
<%= sb.setButton({ title: "click me" }) %>
But this isn't working. (It just doesn't render)
What I am doing wrong here?
EDIT:
I placed console.log(this) in setButton function. it was not logging anything in chrome console. Then I removed = from lodash template syntax, then it logged sb global variable.
<% sb.setButton({ title: "click me" }) %>
But still the above one is not rendering the button.
Your compiled templates don't know what sb is. Assuming you're calling your main template with something like _.template(src)(), Lodash chokes on it with an error looking like ReferenceError: sb is not defined. Pass your partials hash as an option and you will get your button:
var templates = {
button: '<button><%= title %></button>'
};
var sb = {
setButton: function(data){
data = data || {};
return _.template(templates['button'])(data);
}
};
var src = '<%= sb.setButton({ title: "click me" }) %>'
document.getElementById('result').innerHTML = _.template(src)({sb: sb});
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<div id='result'></div>
If you prefer to have you partials directly available without passing them to your template, attach your global to _, for example as _.sb:
var templates = {
button: '<button><%= title %></button>'
};
_.sb = {
setButton: function(data){
data = data || {};
return _.template(templates['button'])(data);
}
};
var src = '<%= _.sb.setButton({ title: "click me" }) %>'
document.getElementById('result').innerHTML = _.template(src)();
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<div id='result'></div>
You need extend data pass to template with sb, some like this:
var sb = {
setButton: function(data){
data = data || { name: "default" };
return _.template("<%= name %>")(data);
},
}
var tmpl = _.template( '<%= setButton({ name: name }) %>' );
var data = _.extend({name:"click"}, {sb});
tmpl(data)
http://jsfiddle.net/stdob/bjdw63wb/2/
I'm new to backbone and trying to make a book library app. While running this code, it is not showing the template.
This is my index.html
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
Name:<input type='text' id='name'/><br>
Author:<input type='text' id='auth'/><br>
Keyword:<input type='text' id='keyword'/><br><br>
<button id="add">Add</button>
</form>
<div id='book_list'>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="script.js"></script>
<script id="bookTemplate" type="text/template">
<ul>
<li><%= name %></li>
<li><%= auth %></li>
<li><%= keyword %></li>
</ul>
<button class="delete">Delete</button>
</script>
</body>
</html>
This is script.js
$(function(){
var bookmodel = Backbone.Model.extend({
defaults: {
name:'temp',
auth:'meee',
keyword:'nonee'
},
});
var booklist = Backbone.Collection.extend({
model:bookmodel
});
var bookview= Backbone.View.extend({
tagName:'div',
className: 'bookContainer',
template: _.template( $('#bookTemplate').html()),
events:{
'click .delete':'deleteBook'
},
render : function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
deleteBook: function(){
this.model.destroy();
this.remove();
}
});
var library = Backbone.View.extend({
model: bookmodel,
initialize: function( initialBooks ) {
$el='#book_list';
var one=new bookmodel({name:'ankur 1',auth:'asdf 1',keyword:'asdfkasdf 1'});
var two=new bookmodel({name:'ankur 2',auth:'asdf 2',keyword:'asdfkasdf 2'});
var bookcoll= [one,two];
this.collection = new booklist(bookcoll);
this.render();
},
render:function(){
this.collection.each(function (item){
var k= new bookview({model:item});
this.$el.append(k.render().el);
},this);
},
});
var xyz= new library();
})
Also, when i'm trying to code like this:
var library = Backbone.View.extend({
model: bookmodel,
$el:'#book_list';
..... //rest of the code
)};
var xyz= new library();
Then,it is leading to : Uncaught TypeError: undefined is not a function, at line
var xyz= new library();
I ran your code and it seemed fine. I dont know exactly whats in script.js but try including your template above your script.js file. It probably can't find your template at the point it was running
I was able to recreate your error in jsfiddle by using their underscore library backbone loader. It wasn't an issue with your code. The following fiddle shows your same error:
http://jsfiddle.net/32tsA/
While this one works fine:
http://jsfiddle.net/BympL/
The issue was with how you had the fiddle set up in my estimation.
I did make some minor changes to fix up capitalization and some best practices with Backbone:
var Bookmodel = Backbone.Model.extend({
defaults: {
name:'temp',
auth:'meee',
keyword:'nonee'
}
});
var Booklist = Backbone.Collection.extend({
model: Bookmodel
});
var Bookview = Backbone.View.extend({
tagName:'div',
className: 'bookContainer',
template: _.template( $('#bookTemplate').html()),
events:{
'click .delete':'deleteBook'
},
render : function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
deleteBook: function(){
this.model.destroy();
this.remove();
}
});
var one=new Bookmodel({name:'ankur 1',auth:'asdf 1',keyword:'asdfkasdf 1'});
var two=new Bookmodel({name:'ankur 2',auth:'asdf 2',keyword:'asdfkasdf 2'});
var bookcoll = [one,two];
var mybooks = new Booklist(bookcoll);
var Library = Backbone.View.extend({
render:function(){
this.collection.each(function (item){
var k= new Bookview({model:item});
this.$el.append(k.render().el);
},this);
},
});
var xyz = new Library({collection: mybooks, el: "#book_list"});
xyz.render();
I named the classes with capital case, removed the initialization of the models from your view (views should be told their models not create their models), and abstracted the el declaration from the Library declaration (so you can reuse the view in a different place).
I'm new to Backbone and trying to put together a small app and having problems getting a view to render client side.
Here is my client html in jade.
extends layout
block content
.row
#breadcrumbs.span12
script#room-list-template(type="text/template")
<td><%=name%></td>
<td><button class="btn btn-info">Join Room</button></td>
script(src="/javascripts/dislocated_poker/index.js").
script(src="/javascripts/dislocated_poker/nav.js").
script(src="/javascripts/dislocated_poker/room.js").
script(type="text/javascript").
$(function(){
DislocatedPoker.init();
})
This call my init function to fetch the data which is stashed away in MongoDb
DislocatedPoker = {
init : function() {
var crumbView = new DislocatedPoker.BreadcrumbView({el : "#breadcrumbs"});
crumbView.render();
var rooms = new DislocatedPoker.Rooms();
var roomListView = new DislocatedPoker.RoomListView({collection : rooms});
rooms.fetch();
}
};
And here are my views and models.
DislocatedPoker.Room = Backbone.Model.extend({
});
DislocatedPoker.Rooms = Backbone.Collection.extend({
model : DislocatedPoker.Room,
url : "/api/rooms"
});
DislocatedPoker.RoomView = Backbone.View.extend({
tagName : "tr",
render : function() {
var template = $("#room-list-template").html();
var compiled = _.template(template, this.model.toJSON());
$(this.el).html(compiled);
return this;
}
})
DislocatedPoker.RoomListView = Backbone.View.extend({
initialize : function() {
this.collection.bind("reset", this.render, this);
this.collection.bind("add", this.render, this);
},
tagName : "table",
className : "table table-striped",
render : function() {
var els = [];
this.collection.each(function(item) {
var itemView = new DislocatedPoker.RoomView({model : item});
els.push(itemView.render().el);
})
//return this;
$(this.el).html(els);
$("#room-list").html(this.el);
}
})
I see JSON being returned from the fetch() method and the collection is iterated, but the result never ends up as client html. If I view the source of the HTML I see the following where the template should render.
<script id="room-list-template" type="text/template"><td><%=name%></td>
<td><button class="btn btn-info">Join Room</button></td>
I feel like I am missing something pretty obvious but can't seem to pinpoint the issue.
Any guidance is much appreciated.
Thanks.
It looks like the following won't work:
$(this.el).html(els);
jQuery's html function takes a string, you're providing an array. Try with:
$(this.el).html(els.join(""));
You should try the following:
this.collection.bind("fetched", this.render, this);
I'm trying to achieve to render a block of HTML by using a model's attribute as a variable in a view.
App = Backbone.Model.extend({
contentType: "text"
});
AppView = Backbone.View.extend({
ContentTpl: _.template( $('#slide-'+this.model.get('contentType')).html() ),
render: function(){
$('#wrapper').html( this.ContentTpl() );
}
});
var app = new App();
var appView = new AppView({model: app});
appView.render();
HTML:
<div id="wrapper">
</div>
<script type="text/template" id="slide-text">
<p>This is a test</p>
</scrip>
But this results in an error...
You defined your view wrong.
you have
AppView = Backbone.Model.extend({
it should be
AppView = Backbone.View.extend({
and, you cannot evaluate this.model before view is initialized, do the following instead:
ContentTpl: function() {
return _.template( $('#slide-'+ this.model.contentType).html() );
},
and , contentType is not a model attribute, it's an attribute on the model object, you cannot use get().
to define it as a model attribute you have to either define it as a default value in the model, or pass it when you instantiate an object:
var app = new App({contentType: 'text'});
or
App = Backbone.Model.extend({
defaults: {
"contentType": "text"
}
});
You have to load your template in the initialize function. this.model doesn't exist at that point.
initialize: function() {
this.ContentTpl = _.template( $('#slide-'+this.model.get('contentType')).html() );
}
However, this is still a bad pattern form backbone. I would inject it as an option.
var template = $('#slide-'+this.model.get('contentType')).html();
var appView = new AppView({model: app, ContentTpl: template });
...
// in your view
initialize: function(options) {
this.ContentTpl = _.template( options.ContentTpl );
}
I have been trying to pass a model object to be evaluated in my template but had no luck. I tried the following but had no luck
dashboardmodel.js
var myMod = Backbone.Model.extend({
defaults: {
name: "mo",
age: "10"
}
});
myview.js
var dashView = Backbone.View.extend({
el: '.content-area',
this.mymodel = new myMod({}),
template: _.template(dashBoardTemplate, this.mymodel),
initialize: function() {
},
render: function() {
this.$el.html(this.template);
return this;
}
// more javascript code.............
dahboard.html
<p> Hello <%= name %> </p>
PS: I am using the underscore template engine
In addition , your way to pass a model to a view is not flexible, because you would pass an instance of your model, instead of a default model. Thus, you might want to single out
this.mymodel = new myMod({}),
(btw, above line gives me error message in my chrome browser because of "=" sign)
Then, suppose you have an instance A:
A = new myMod({"name": "World", "age":100})
Then pass it to your view as:
myview = new dashView({mymodel: A})
One more step, you have to do is to call render function:
myview.render();
Here's a complete solution:
<html>
<script src="jquery-1.10.2.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone.js"></script>
<body>
<script type="text/template" id="dashBoardTemplate">
<p> Hello <%= name %> </p>
</script>
<div class="content-area">
</div>
<script type="text/javascript">
var myMod = Backbone.Model.extend({
defaults: {
name: "mo",
age: "10"
}
});
var dashView = Backbone.View.extend({
el: '.content-area',
template: _.template($("#dashBoardTemplate").html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
mymod = new myMod({"name": "World", "age":100});
myview = new dashView({model:mymod});
myview.render();
</script>
</body>
</html>
If you want to study backone.js, please read this open source book which get me started:
http://addyosmani.github.io/backbone-fundamentals/
You need to get properties of a Backbone Model with the getter syntax, so you need to rewrite your template to:
<p> Hello <%= obj.get('name') %> </p>
Or you need to convert your model into a plain JS object when calling _.template what you can do with the .toJSON() (which creates a clone of the model) or .attributes property:
template: _.template(dashBoardTemplate, this.mymodel.toJSON())
Side note: you should consider to move the template rendering logic into your view. Because your current code render your template when your view is declared and not when you call the render method. So you might get unexpected result. So your code you look like this:
template: _.template(dashBoardTemplate), //only compile the template
render: function() {
this.$el.html(this.template(this.mymodel.toJSON()));
return this;
}