Backbone - View not rendering

StackOverflow https://stackoverflow.com//questions/25051640

Question

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();

Was it helpful?

Solution

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).

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top