最简单的backbone.js示例
最简单的backbone.js示例
提问于 2011-04-03 13:45:50
我正在创建一个简单的backbone示例来尝试学习它，但在渲染我的视图时遇到了问题。我以Thomas Davis的tutorial为基础，但查看了许多其他可用的应用程序和教程。
我改变了Davis的教程，不仅仅是因为我想添加一个输入框，还因为基于主干文档，我认为它需要更少的代码和不同的结构。显然，因为我不能让它工作，我不知道什么是需要的，什么是不需要的。
我的最终目标是在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'});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2011-04-07 14:44:42
在获得所需功能的代码中，您遇到了一些基本问题。我把你的代码变成了jsfiddle，你可以在这里看到有效的解决方案。
http://jsfiddle.net/thomas/Yqk5A/
代码
<!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'});
});我注意到你想要尽可能少的代码，所以我省略了一些你不需要的东西，比如声明一个实际的模型。如果使用示例中所示的集合，可能会更简单。
此外，我刚刚推出了一个新的网站，其中包含骨干教程，可能有助于解决您的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5527823
复制相关文章
相似问题