[Backbone] App orgianztation
Time to get organized. Dr. Goodparts really hates global scope and has ordered that we only have at most 1 object polluting his precious global scope.
Create an object that contains an empty Collections
, Models
, and Views
object. Name the top-level objectAppointmentApp
.
var AppointmentApp = { Views: {}, Models: {}, Collections: {} };
Now that we have our new top-level object, change our class definitions below to use it. Make sure you clean up the names of the views by removing View
since it's not needed anymore. Assign the AppRouter
right on theAppointmentApp
object.
var AppointmentApp = { Collections: {}, Models: {}, Views: {} } AppointmentApp.Models.Appointment = Backbone.Model.extend({}); AppointmentApp.Collections.Appointments = Backbone.Collection.extend({}); AppointmentApp.Views.Appointment = Backbone.View.extend({}); AppointmentApp.Views.Appointments = Backbone.View.extend({}); AppointmentApp.AppRouter = new (Backbone.Router.extend({}))();
Turn the AppointmentApp
object into a Backbone view instance. That means that you'll have to immediately instantiate the Backbone.View class returned by Backbone.View.extend()
.
var AppointmentApp = new (Backbone.View.extend({ Collections: {}, Models: {}, Views: {} }))({el: document.body});
In our new App view, add an event to capture all clicks on a
tags that have the data-backbone
attribute on them. In the event handler, prevent the default event and use Backbone.history.navigate
to pass the link through our app's router. Don't forget to pass in trigger: true
.
var AppointmentApp = new (Backbone.View.extend({ Collections: {}, Models: {}, Views: {}, events:{ 'click a[data-backbone]': function(e){ e.preventDefault(); Backbone.history.navigate(e.target.pathname, {trigger: true}); }, } }))({el: document.body});
Dr. Goodparts wants his appointment app to load faster so the server team included some bootstrap data on the page that you can use to bootstrap your Appointments
collection instead of using fetch. Modify the start
function in theAppointmentApp
to receive this data as a parameter and pass in the appointments
bootstrap data to theAppointments()
constructor.
var AppointmentApp = new (Backbone.View.extend({ Collections: {}, Models: {}, Views: {}, events: { 'click a[data-backbone]': function(e){ e.preventDefault(); Backbone.history.navigate(e.target.pathname, { trigger: true }); } }, start: function(appointments){ this.appointments = new AppointmentApp.Collections.Appointments(appointments.appointments); var appointmentsView = new AppointmentApp.Views.Appointments({collection: this.appointments}); $('#app').html(appointmentsView.render().el); //this.appointments.fetch(); } }))({el: document.body});
相关文章
- 关于个人开源项目(vue app)的一些总结
- Hue二次开发(一):创建App
- [AngularJS]1. Fisrt App, ng-app, Exprection{{}}
- [Backbone] First App: Modle, View of Backbone.js
- uni-app api:拨打电话(hbuilderx 3.6.18)
- 93、App Links (应用程序链接)实例
- 美柚:女性移动APP安全攻防战
- [PReact] Reduce the Size of a React App in Two Lines with preact-compat
- [Backbone] First App: Modle, View of Backbone.js
- uni-app:微信小程序中用户登录(hbuilderx 3.6.18)
- How does model reference pass from app view to master view
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- 适合做app的前端框架有哪些?webAPP&移动端App:react native、weex、flutter
- App Thinning(为什么苹果app上传时的包比在appStore下载下来的包大很多)
- app自动化测试(Android)--App 控件定位
- 字节跳动用7年直逼社交APP一哥,腾讯慌了
- 支付宝和bilibilli APP推荐的一些思考