Я создаю пример с голой стороной backbone, чтобы попытаться изучить его, и у меня возникают проблемы с отображением моего представления. Я основал его на учебнике Thomas Davis но просмотрел многие другие приложения и учебные пособия.
Я меняю учебник Дэвиса не только потому, что хочу добавить окно ввода, но также потому, что на основе базовых документов я думал, что ему нужно меньше кода и другой структуры. Очевидно, потому что я не могу заставить это работать, я не знаю, что нужно, а что нет.
Моя конечная цель состояла в том, чтобы просто добавить имена в теги li
внутри ul#friends-list
, хотя я не думаю, что el: 'body'
поможет мне там.
Что я делаю неправильно? Спасибо за любую помощь.
Мой 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 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'});
});