[Backbone]8. Level 7: Router and history
1. Ceate a route Class
var AppRouter = Backbone.Router.extend({ });
2. Add a route name it "show", listene to 'appointments/:id'
var AppRouter = Backbone.Router.extend({ routes: { "appointments/:id": 'show'}, show: function(id){ }, });
3. Start the backbone history, and put pushState to true:
Backbone.history.start({pushState: true});
4. New a Route instance, and use navigate function to 'appointments/1':
var router = new AppRouter(); router.navigate('appointments/1', {trigger: true});
5. In show function, we fetch the data where id = 1, new a view instance and replace the data on '#app':
var AppRouter = Backbone.Router.extend({ routes: { "appointments/:id": "show" }, show: function(id){ var appointment = new Appointment({id: id}); appointment.fetch(); var appointmentView = new AppointmentView({model: appointment}); $("#app").html(appointmentView.render().el); } });
6. First, add the root route and point it to the index
action.
As you can see we are passing in a appointmentList
list collection in the router's initialize
function. Finish out the index
action by replacing the content of #app
with the appointmentsView
. Make sure you fetch new data for the appointmentList
from the server.
var AppRouter = Backbone.Router.extend({ routes: { "" : "index", "appointments/:id": "show" }, initialize: function(options){ this.appointmentList = options.appointmentList; }, index: function(){ var appointmentsView = new AppointmentListView({collection: this.appointmentList}); appointmentsView.render(); $("#app").append(appointmentsView.el); this.appointmentList.fetch(); }, show: function(id){ var appointment = new Appointment({id: id}); var appointmentView = new AppointmentView({model: appointment}); appointmentView.render(); $('#app').append(appointmentView.el); appointment.fetch(); } });
8. First, instead of assigning a Router class to AppRouter
, just create the Router instance.
Next, instead of passing in the appointmentList
collection in initialize, create an instance of AppointmentList
and assign it to this.appointmentList
.
Add a start
function to the router to start our Backbone history with pushState on.
Finally, call the router's start
function from inside a jQuery ready function to ensure we don't start updating the DOM before it's ready.
var AppRouter = new (Backbone.Router.extend({ routes: { "appointments/:id": "show", "": "index" }, initialize: function(){ this.appointmentList = new AppointmentList(); }, start: function(){ Backbone.history.start({pushState:true}); }, index: function(){ var appointmentsView = new AppointmentListView({collection: this.appointmentList}); appointmentsView.render(); $('#app').html(appointmentsView.el); this.appointmentList.fetch(); }, show: function(id){ var appointment = new Appointment({id: id}); var appointmentView = new AppointmentView({model: appointment}); appointmentView.render(); $('#app').html(appointmentView.el); appointment.fetch(); } })); $(window).ready(function(){ AppRouter.start(); });
------------------------------Final Code--------------------------------
var AppRouter = new (Backbone.Router.extend({ routes: { "appointments/:id": "show", "": "index" }, initialize: function(){ this.appointmentList = new AppointmentList(); }, start: function(){ Backbone.history.start({pushState:true}); }, index: function(){ var appointmentsView = new AppointmentListView({collection: this.appointmentList}); appointmentsView.render(); $('#app').html(appointmentsView.el); this.appointmentList.fetch(); }, show: function(id){ var appointment = new Appointment({id: id}); var appointmentView = new AppointmentView({model: appointment}); appointmentView.render(); $('#app').html(appointmentView.el); appointment.fetch(); } })); $(window).ready(function(){ AppRouter.start(); }); AppRouter.navigate('appointments/1', {trigger: true}); var AppointmentView = Backbone.View.extend({ template: _.template('<span class="<% if(cancelled) print("cancelled") %>"><%= title %></span><a href="#">x</a>'), initialize: function(){ this.model.on('change', this.render, this); }, render: function(){ this.$el.html(this.template(this.model.toJSON())); return this; } }); var AppointmentListView = Backbone.View.extend({ initialize: function(){ this.collection.on('add', this.addOne, this); this.collection.on('reset', this.render, this); }, render: function(){ this.collection.forEach(this.addOne, this); }, addOne: function(model){ var appointmentView = new AppointmentView({model: model}); appointmentView.render(); this.$el.append(appointmentView.el); } }); var Appointment = Backbone.Model.extend({ defaults: function() { return { 'date': new Date(), 'cancelled': false, 'title': 'Checkup' } } }); var AppointmentList = Backbone.Collection.extend({ model: Appointment });
相关文章
- ORA-26810: Apply “string” on database “string” is in the mode of combined capture and apply. ORACLE 报错 故障修复 远程处理
- ORA-26826: string apply coordinator and apply slave are unable to communicate. ORACLE 报错 故障修复 远程处理
- ORA-41721: invalid use of DMLEVENTS and CNFEVENTS in rule class properties ORACLE 报错 故障修复 远程处理
- ORA-12486: effective max labels and min labels cannot be changed ORACLE 报错 故障修复 远程处理
- ORA-16445: Database has to be mounted and cannot be open ORACLE 报错 故障修复 远程处理
- JavaScript学习总结(三)——逻辑And运算符详解编程语言
- MySQL中的OR与AND操作符比较(mysqlor和and)
- 深入浅出:MySQL中AND和OR运算符使用方法(mysql中and和or)
- Troubleshooting Error 1135 in MySQL: How to Solve It and Get Your Database Back on Track(mysql1135)
- Revolutionizing Database Management: A Look at the Power of VoltDB and Redis(voltdbredis)
- Mastering Linux Operating System Administration: Tips Tricks and Best Practices(linux操作系统管理)
- Unleashing the Power of Linux: Tips and Tricks for Root Users(linuxroot用户)
- Exploring the Power and Functionality of Oracle OC4J for Efficient Web Development(oracleoc4j)
- MySQL中使用AND命令的条件语句(mysql中且的条件命令)
- 深入探究Mysql中IN与AND逻辑运算的应用(mysql中in与and)
- Mysql中强大的AND运算符的使用方法探究(mysql中and的使用)
- MySQL中的AND逻辑操作符是什么(mysql中and是什么)
- Oracle中使用除了And的其他查询关键字(oracle中除了and)
- and的区别Oracle数据库中的OR与AND的差异(oracle中or和)
- Oracle 数据库中使用AND拼接的威力(oracle中and拼接)