我正在创建一个极简的backbone示例,以尝试学习它,并且在尝试渲染我的视图时遇到了问题。我基于Thomas Davis的教程和其他许多应用程序和教程进行了研究。
我对Davis的教程进行了修改,不仅是因为我想添加输入框,而且因为根据backbone文档,我认为它需要更少的代码和不同的结构。显然,因为我无法使其正常工作,我不知道需要什么以及不需要什么。
我的最终目标只是在ul#friends-list
中的li
标签中添加名称,尽管我不认为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'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>
我的 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
中列出? - joshvermaire