Simplest of backbone.js examples

63,092

You had some fundamental problems with your code to get the functionality that you required. I turned your code into a jsfiddle and you can see the working solution here.

http://jsfiddle.net/thomas/Yqk5A/

Code

<!DOCTYPE HTML>
<html>
<head>
<title>Tut</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
</head>
<body>

<input type="text" placeholder="Enter friend's name" id="input" />
<button id="add-input">Add Friend</button>

<ul id="friends-list">
</ul>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

$(function() {

FriendList = Backbone.Collection.extend({
    initialize: function(){

    }
});

FriendView = Backbone.View.extend({

    tagName: 'li',

    events: {
        'click #add-input':  'getFriend',
    },

    initialize: function() {
        var thisView = this;
        this.friendslist = new FriendList;
        _.bindAll(this, 'render');
        this.friendslist.bind("add", function( model ){
            alert("hey");
            thisView.render( model );
        })
    },

    getFriend: function() {
        var friend_name = $('#input').val();
        this.friendslist.add( {name: friend_name} );
    },

    render: function( model ) {
        $("#friends-list").append("<li>"+ model.get("name")+"</li>");
        console.log('rendered')
    },

});

var view = new FriendView({el: 'body'});
});

I noticed that you wanted as little code as possible so I left some things out that you don't need such as declaring an actual model. It might be easier if you use a collection like in the example instead.

Also I have just launched a new site containing Backbone tutorials which might help solve your problem.

BackboneTutorials.com

63,092

joshvermaire

.einstein { position: relative; }

Updated on November 23, 2020

Comments

joshvermaire over 3 years

I'm creating a bare bones backbone example to try to learn it and am having issues getting my view to render. I've based it on Thomas Davis's tutorial but looked at many of the other apps and tutorials available.

I'm changing Davis's tutorial not only because I want to add an input box, but also because based on the backbone docs I thought it needed less code and a different structure. Obviously because I can't get this to work, I don't know what's needed and what isn't.

My ultimate goal was to just add the names in li tags within ul#friends-list, although I don't think el: 'body' will help me there.

What am I doing wrong? Thanks for any help.

My html:

<!DOCTYPE HTML>
<html>
<head>
<title>Tut</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
</head>
<body>

<input type="text" placeholder="Enter friend's name" id="input" />
<button id="add-input">Add Friend</button>

<ul id="friends-list">
</ul>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

My test.js

$(function() {

Friend = Backbone.Model.extend();
//Create my model

var friends = new Friend([ {name: 'Eddard Stark'}, {name: 'Robert Baratheon'} ]);
//Create new models to be used as examples


FriendList = Backbone.Collection.extend({
    model: Friend
});
//Create my collection

var friendslist = new FriendList;
//Created to hold my friends model


FriendView = Backbone.View.extend({

    tagName: 'li',

    events: {
        'click #add-input':  'getFriend',
    },

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

    getFriend: function() {
        var friend_name = $('#input').val();
        var friend_model = new Friend({name: friend_name});
    },

    render: function() {
        console.log('rendered')
    },

});

var view = new FriendView({el: 'body'});
});

Piotr Perak about 12 years

I think there is problem with that code. I don't see why Collection would ever call to view. I think view should listen to add event on collection and rerender.
Piotr Perak about 12 years

And collection also depends on name of variable holding reference to the view.
Dinesh over 11 years

@ThomasDavis From you I got to know jsfiddle.net. Handy thing to work in JS. Cheers