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'});
});
ul
?