Javascript 最简单的backbone.js 示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5527823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simplest of backbone.js examples
提问by joshvermaire
I'm creating a bare bones backboneexample to try to learn it and am having issues getting my view to render. I've based it on Thomas Davis's tutorialbut looked at many of the other apps and tutorials available.
我正在创建一个裸骨骨干示例来尝试学习它，但在渲染我的视图时遇到了问题。我已经根据 Thomas Davis 的教程编写了它，但查看了许多其他可用的应用程序和教程。
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.
我正在更改 Davis 的教程，不仅因为我想添加一个输入框，还因为基于主干文档，我认为它需要更少的代码和不同的结构。显然，因为我不能让它工作，我不知道什么是需要的，什么不是。
My ultimate goal was to just add the names in litags within ul#friends-list, although I don't think el: 'body'will help me there.
我的最终目标是在li内的标签中添加名称ul#friends-list，尽管我认为el: 'body'这对我没有帮助。
What am I doing wrong? Thanks for any help.
我究竟做错了什么？谢谢你的帮助。
My html:
我的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
我的 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'});
});
回答by Thomas Davis
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.
为了获得所需的功能，您的代码存在一些基本问题。我把你的代码变成了 jsfiddle，你可以在这里看到有效的解决方案。
http://jsfiddle.net/thomas/Yqk5A/
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.
此外，我刚刚推出了一个包含 Backbone 教程的新站点，这可能有助于解决您的问题。
