Skip to content

Step 4 - Simple Contact view

Compare
Choose a tag to compare
@dmytroyarmak dmytroyarmak released this 03 Feb 08:01
  1. Create file app/js/views/contact.js with view:

    ContactManager.Views.Contact = Backbone.View.extend({
    render: function() {
      var html = '<h1>' + this.model.get('name') + '</h1>';
      this.$el.html(html);
      return this;
    }
    });
    

    and add to index.html:

    <script src="app/js/views/contact.js"></script>
    
  2. Show in console how to render and view's root element (el)

    var bob = new ContactManager.Models.Contact({name: 'Bob'})
    var bobView = new ContactManager.Views.Contact({model: bob})
    bobView.render()
    bobView.$el
    
    
  3. Append view to body:

    $('body').append(bobView.$el)
    

Difference