最简单的backbone.js例子
我正在创build一个简单的骨架示例来尝试学习，并且遇到了让我的视图呈现的问题。 我已经把它build立在Thomas Davis的教程上，但是看了很多其他的应用程序和教程。
我正在改变Davis的教程，不仅因为我想添加一个input框，而且因为基于骨干文档，我认为它需要更less的代码和不同的结构。 显然，因为我不能得到这个工作，我不知道什么是需要的，什么不是。
我的最终目标是在ul#friends-list li添加li标签中的名字，尽pipe我不认为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'}); });
您的代码有一些基本问题，以获得所需的function。 我把你的代码变成了jsfiddle，你可以在这里看到工作的解决scheme。
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'}); });
我注意到你想要尽可能less的代码，所以我留下了一些你不需要的东西，例如声明一个实际的模型。 如果您使用示例中的集合，则可能会更容易。
另外我刚刚推出了一个包含Backbone教程的新网站，可能有助于解决您的问题。
BackboneTutorials.com
