LINE7~9: 增加了defaults。如果属性中没有website（注意不是website值为空），会设置website值为dmyz。
LINE10~14: 增加validate函数。当website值为dmyz时，触发invalid事件。
LINE18~20: 绑定invalid事件，alert返回的错误。
LINE31: 不做fetch，直接save操作。
因为没有fetch，所以页面上不会显示数据。执行save操作，会调用validate函数，验证失败会触发invalid事件，alert出错误提示。同时save操作也会向Model的URL发起一个PUT请求，github这个API没有处理PUT，所以会返回404错误。
在Console中输入gist.set(‘description', ‘demo')，可以看到页面元素也会有相应的变化。执行gist.set(‘description', gist.previous(‘description'))恢复之前的值。这就是Model和View的映射，现在还是自己实现的，下一节会用Backbone的View来实现。
2. View
用Backbone的View来改写之前代码LINE24~33部分：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript" src="https://underscorejs.org/underscore-min.js"></script> <script type="text/javascript" src="https://backbonejs.org/backbone-min.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <table> <thead><th>description</th><th>URL</th><th>created_at</th><th></th></thead> <tbody></tbody> </table> <script type="text/javascript"> var Gist = Backbone.Model.extend({ url: 'https://api.github.com/gists/public', parse: function (response) { return response[0]; } }), gist = new Gist(); var GistRow = Backbone.View.extend({ el: 'tbody', MODEL: gist, events: { 'click a': 'replaceURL' }, replaceURL: function () { this.MODEL.set('url', 'http://dmyz.org'); }, initialize: function () { this.listenTo(this.MODEL, 'change', this.render); }, render: function () { var model = this.MODEL, tr = document.createElement('tr'); tr.innerHTML = '<td>' + model.get('description') + '</td><td>' + model.get('url') + '</td><td>' + model.get('created_at') + '</td><td><a href="javascript:void(0)" >®</a></td>'; this.el.innerHTML = tr.outerHTML; return this; } }); var tr = new GistRow(); gist.fetch(); </script> </body> </html>
LINE25: 所有的View都是基于DOM的，指定el会选择页面的元素，指定tagName会创建相应的DOM，如果都没有指定会是一个空的div。
LINE27~32: 绑定click事件到a标签，replaceURL函数会修改(set)url属性的值。
LINE33~35: View的初始化函数(initialize)，监听change事件，当Model数据更新时触发render函数。
LINE36~42: render函数。主要是LINE41~42这两行，把生成的HTML代码写到this.el，返回this。
LINE44: 实例化GistRow，初始化函数(initialize)会被执行。
点击行末的a标签，页面显示的这条记录的URL会被修改成。
这个View名为GistRow，选择的却是tbody标签，这显然是不合理的。接下来更改JS代码，显示API返回的30条数据：
/* 替换之前代码的JS部分(LINE16~45) */ var Gist = Backbone.Model.extend(), Gists = Backbone.Model.extend({ url: 'https://api.github.com/gists/public', parse: function (response) { return response; } }), gists = new Gists(); var GistRow = Backbone.View.extend({ tagName: 'tr', render: function (object) { var model = new Gist(object); this.el.innerHTML = '<td>' + model.get('description') + '</td><td>'+ model.get('url') + '</td><td>' + model.get('created_at') + '</td><td></td>' return this; } }); var GistsView = Backbone.View.extend({ el: 'tbody', model: gists, initialize: function () { this.listenTo(this.model, 'change', this.render); }, render: function () { var html = ''; _.forEach(this.model.attributes, function (object) { var tr = new GistRow(); html += tr.render(object).el.outerHTML; }); this.el.innerHTML = html; return this; } }); var gistsView = new GistsView(); gists.fetch();
LINE2~9: 创建了两个Model(Gist和Gists)，parse现在返回完整Array而不只是第一条。
LINE11~18: 创建一个tr。render方法会传一个Object来实例化一个Gist的Model，再从这个Model里get需要的值。
LINE26~34: 遍历Model中的所有属性。现在使用的是Model而不是Collection，所以遍历出的是Object。forEach是Underscore的函数。