CODEWITHSUNDEEP
javascriptbackbone.js
Chris
Chris

Reputation: 11

backbone view render not creating

Just beginning with backbone and after few hours can't seem to get even a view render working correctly. I've included all appropriate JavaScript files in HTML. Here is my script:

(function($) { 
// MODELS
var Paper = Backbone.Model.extend ({
    defaults : {
        title : null,
        author: null,
    }
});

// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
    model : Paper,
    initialize : function() {
        console.log("We've created our collection");
    }
});

// VIEWS
var PaperView = Backbone.View.extend({
    tagName:'li',
    className: 'resultTable',
    events: {
        'click .ptitle':'handleClick'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'handleClick');
    },

    render: function() {
        $(this.el).html('<td>'+this.model.get('title')+'</td>');
        return this; // for chainable calls
    },

    handleClick: function() {
        alert('Been clicked');
    }
});


var ListView = Backbone.View.extend({
    events: {
    //"keypress #new-todo":  "createOnEnter",
},

    initialize : function() {
        console.log('Created my app view');
        _.bindAll(this, 'render', 'addOne', 'appendOne');

        this.collection = new PaperCollection();
        this.collection.bind('add', this.appendOne); // collection event binder

        this.counter = 0;
        this.render();
    },

    render : function() {
        console.log('Render app view');
        $(this.el).append("<button id='add'>Add list item</button>");
        $(this.el).append("<p>More text</p>");
  // $(this.el).append("<ul></ul>");

  /*
        _(this.collection.models).each(function(item){      // in case collection is not empty
    appendOne(item);
  }, this); */
    },

    addOne: function() {
  this.counter++;
  var p = new Paper();
  p.set({
    title: "My title: " + this.counter // modify item defaults
  });
  this.collection.add(p);
    },

    appendOne: function(p) {
    var paperView = new PaperView({
    model: p
  });
  $('ul', this.el).append(paperView.render().el);
}
});

var App = new ListView({el: $('paper_list') });
// App.addOne();

})(jQuery);

Note not getting any errors in console on FF - but still not displaying any of the render outputs in AppView). Appreciate any help. Simple HTML:

<body>
    <div class="container_16">


        <div class="grid_16">
            <div id="paper_list">
                Text...

                <ul class="thelist"></ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>

Upvotes: 1

Views: 4957

Answers (1)

jcreamer898
jcreamer898

Reputation: 8189

This will at least get you rendering the ListView...

// MODELS
var Paper = Backbone.Model.extend ({
    defaults : {
        title : null,
        author: null,
    }
});

// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
    model : Paper,
    initialize : function() {
        console.log("We've created our collection");
    }
});

// VIEWS
var PaperView = Backbone.View.extend({
    tagName:'li',
    className: 'resultTable',
    events: {
        'click .ptitle':'handleClick'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'handleClick');
    },

    render: function() {
        $(this.el).html('<td>'+this.model.get('title')+'</td>');
        return this; // for chainable calls
    },

    handleClick: function() {
        alert('Been clicked');
    }
});


var ListView = Backbone.View.extend({
    el: '#paper_list',

    events: {
        "click #add":  "createOnEnter",
    },

    initialize : function() {
        console.log('Created my app view');
        _.bindAll(this, 'render', 'addOne', 'appendOne');

        this.collection = new PaperCollection();
        this.collection.bind('add', this.appendOne); // collection event binder

        this.counter = 0;
        this.render();
    },

    render : function() {
        console.log(this);
        $(this.el).append("<button id='add'>Add list item</button>");
        $(this.el).append("<p>More text</p>");
  // $(this.el).append("<ul></ul>");

  /*
        _(this.collection.models).each(function(item){      // in case collection is not empty
    appendOne(item);
  }, this); */
    },

    addOne: function() {
        this.counter++;
        var p = new Paper();
        p.set({
            title: "My title: " + this.counter // modify item defaults
        });
        this.collection.add(p);
    },

    appendOne: function(p) {
        var paperView = new PaperView({
            model: p
        });
        $('ul', this.el).append(paperView.render().el);
    }
});


$(function(){
    var App = new ListView();
});

A couple of things...First, I initialized your ListView inside of a document.ready to make sure that the DOM was ready to go, second, I made the el in the listview simply #paper_list then you can do $(this.el) later.

I at least got the button and "more text" to show up...Let me know if that helps!

Upvotes: 5

Related Questions