Weitere ähnliche Inhalte Ähnlich wie Applications: A Series of States (20) Kürzlich hochgeladen (20) Applications: A Series of States63. {
vendor: 'Wholefds Kbs',
amount: '20.70',
isCredit: false,
isPending: true,
type: 'Groceries',
location: {
lat: '41.910006',
long: '87.657166',
address: '1070 N North Branch St,n
Chicago IL 60642'
}
}
64. success: function(purchase){
var sidebar = $('#more-info');
if(purchase.isPending) { $('.is-pending', sidebar).show(); }
$('.name', sidebar).html(purchase.vendor);
$('.amount', sidebar).html('-' + purchase.amount);
$('.category', sidebar).html(purchase.type);
$('.map', sidebar).gMapPlugin(purchase.location);
$('.address', sidebar).html(purchase.location.address);
}
71. success: function(purchase){
var sidebar = $('#more-info'),
listItem = $(‘#list .purchase-’ + purchase.id),
purchaseTemplate = Templates.purchase.show,
purchaseTableRowTemplate = Templates.purchase.row;
sidebar.html(purchaseTemplate(purchase));
listItem.html(purchaseTableRowTemplate(purchase));
$('.map', sidebar).gMapPlugin(purchase.location);
}
88. app.PurchaseListView = Backbone.View.extend({
el: ‘#purchase-list’,
initialize: function(){
this.collection = app.Purchases;
this.collection.on('change', this.render, this)
this.render();
},
render: function(){
this.$el.append(new PurchasesFilterView().render());
_.each(this.collection.models, function (item) {
this.$el.append(new PurchaseRowView({model: item})
.render());
}, this);
}
});
89. app.PurchaseRowView = Backbone.View.extend({
initialize: function() {
this.model.on( 'change', this.render, this );
},
tagName: 'li',
template: ...,
events: {
'click': 'toggleMoreDetails', 'click .edit': 'toggleEdit'
},
toggleMoreDetails: function(){
this.model.toggleMoreDetails();
this.$el.toggleClass( 'selected', this.moreDetailsShowing);
},
render: function(){
this.$el.html(this.template(this.model))
}
});
143. App = Ember.Application.create();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend();
App.Router = Ember.Route.extend({
root: Ember.Route.extend({})
// this happens for you: ‘shared instance’
// applicationController: App.ApplicationController.create()
})
151. App = Ember.Application.create();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend();
App.Router = Ember.Route.extend({
root: Ember.Route.extend({
purchases: Ember.Route.extend({
index: Ember.Route.extend({
})
})
})
});
153. App = Ember.Application.create();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend();
App.Router = Ember.Route.extend({
root: Ember.Route.extend({
purchases: Ember.Route.extend({
index: Ember.Route.extend({
})
})
})
});
156. purchases: Ember.Route.extend({
index: Ember.Route.extend({
connectOutlets: function(router){
var controller = router.get('applicationController'),
purchases = App.Purchase.find(),
locations = purchases.get('locations');
controller.connectOutlet('mainArea', 'purchaseList', purchases);
controller.connectOutlet('detailsArea', 'map', locations);
}
})
})
where? what? data context?
167. purchases: Ember.Route.extend({
index: Ember.Route.extend({
connectOutlets: function(router){
var controller = router.get('applicationController'),
purchases = App.Purchase.find(),
locations = purchases.get('locations');
controller.connectOutlet('mainArea', 'purchaseList', purchases);
controller.connectOutlet('detailsArea', 'map', locations);
}
})
})
where? what? data context?
175. {{#each purchase in controller}}
<li>
{{purchase.date}}
{{purchase.location}}
{{purchase.amount}}
</li>
{{/each}}
176. {{#each purchase in controller}}
<li {{action showDetails purchase}}>
{{purchase.date}}
{{purchase.location}}
{{purchase.amount}}
</li>
{{/each}}
182. purchases: Ember.Route.extend({
index: Ember.Route.extend({
showDetails: Ember.Route.transitionTo(‘viewing’),
connectOutlets: function(router){
...
}
}),
viewing: Ember.Route.extend({
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'purchaseDetails', context);
}
})
})
where? what? data context?
183. purchases: Ember.Route.extend({
index: Ember.Route.extend({
showDetails: Ember.Route.transitionTo(‘viewing’),
connectOutlets: function(router){
...
}
}),
viewing: Ember.Route.extend({
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'purchaseDetails', context);
}
})
})
184. purchases: Ember.Route.extend({
index: Ember.Route.extend({
showDetails: Ember.Route.transitionTo(‘viewing’),
connectOutlets: function(router){
...
}
}),
viewing: Ember.Route.extend({
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'purchaseDetails', context);
}
})
})
{{#each purchase in controller}}
<li {{action showDetails purchase}}>
{{purchase.date}}
{{purchase.location}}
{{purchase.amount}}
</li>
{{/each}}
188. <div class='actions'>
<a {{action editPurchase content}}>
Edit
</a>
<a href='...'>Support</a>
</div>
{{#if pending}}
<h3>
This transaction is pending...
</h3>
{{/if}}
{{name}}
{{amount}}
{{label}}
App.PurchaseDetailsView = Ember.View.extend({
templateName: 'details'
});
App.PurchaseDetailsController = Ember.ObjectController.extend();
189. App.PurchaseDetailsView = Ember.View.extend({
templateName: 'details'
});
App.PurchaseDetailsController = Ember.ObjectController.extend();
<div class='actions'>
<a {{action editPurchase content}}>
Edit
</a>
<a href='...'>Support</a>
</div>
{{#if pending}}
<h3>
This transaction is pending...
</h3>
{{/if}}
{{name}}
{{amount}}
{{label}}
193. App.PurchaseDetailsView = Ember.View.extend({
templateName: 'details'
});
App.PurchaseDetailsController = Ember.ObjectController.extend();
<div class='actions'>
<a {{action editPurchase content}}>
Edit
</a>
<a href='...'>Support</a>
</div>
{{#if pending}}
<h3>
This transaction is pending...
</h3>
{{/if}}
{{name}}
{{amount}}
{{label}}
197. <div class='actions'>
<a {{action editPurchase content}}>
Edit
</a>
<a href='...'>Support</a>
</div>
{{#if pending}}
<h3>
This transaction is pending...
</h3>
{{/if}}
{{name}}
{{amount}}
{{label}}
198. purchases: Ember.Route.extend({
index: Ember.Route.extend({
showDetails: Ember.Route.transitionTo(‘viewing’),
connectOutlets: function(router){
...
}
}),
viewing: Ember.Route.extend({
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'purchaseDetails', context);
}
})
})
199. purchases: Ember.Route.extend({
index: Ember.Route.extend({
showDetails: Ember.Route.transitionTo(‘viewing’),
connectOutlets: function(router){
...
}
}),
viewing: Ember.Route.extend({
editPurchase: Ember.Route.transitionTo(‘editing’),
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'purchaseDetails', context);
}
})
})
200. purchases: Ember.Route.extend({
index: Ember.Route.extend({
showDetails: Ember.Route.transitionTo(‘viewing’),
connectOutlets: function(router){
...
}
}),
editing: Ember.Route.extend({
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'editPurchaseDetails', context);
}
}),
viewing: Ember.Route.extend({
editPurchase: Ember.Route.transitionTo(‘editing’),
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'purchaseDetails', context);
}
})
})
201. purchases: Ember.Route.extend({
index: Ember.Route.extend({
showDetails: Ember.Route.transitionTo(‘viewing’),
connectOutlets: function(router){
...
}
}),
editing: Ember.Route.extend({
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'editPurchaseDetails', context);
}
}),
viewing: Ember.Route.extend({
editPurchase: Ember.Route.transitionTo(‘editing’),
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'purchaseDetails', context);
}
})
})
where? what? data context?
213. purchases: Ember.Route.extend({
index: Ember.Route.extend({
showDetails: Ember.Route.transitionTo(‘viewing’),
connectOutlets: function(router){
...
}
}),
editing: Ember.Route.extend({
saveChanges: Ember.Route.transitionTo(‘index’),
connectOutlets: function(router, context){
...
}
}),
viewing: Ember.Route.extend({
editPurchase: Ember.Route.transitionTo(‘editing’),
connectOutlets: function(router, context){
...
})
})
224. • app is just a series of documents
• or you’re just coding single page
• not a client app
• manipulation mostly presentational
• few data communications
• user interaction brief, simple, infrequent
225. • app is series of documents
• with “islands of richness”
• occassional data communications
• multiple parts of a page need to reflect data
• shallow view hierarchy (1-2 levels)
• small number of views (~7)
• user interaction brief and/or infrequent
226. • frequent data communications
• many parts of a page need to reflect data
• deep view hierarchy (2-3+)
• large number of views
• user will remain for large amounts of time
• and/or frequently return
• server is just an api
• you’d *almost* write a desktop/iOS app