Introduction à Marionette
0 likes560 views
![Accès aux éléments du DOM
Backbone.Marionette.ItemView.extend({
tagName:
"tr",
ui:
{
checkbox:
"input[type=checkbox]"
},
onRender:
function()
{
if
(this.model.get('selected'))
{
this.ui.checkbox.addClass('checked');
}
}
});
On s’en sert souvent
11
Backbone
Meetup](https://image.slidesharecdn.com/l0czgemsymrnp94jeuhc-signature-153f9da2e9413104bffc51d4ae280a3b8148f0d925278371c3c018326a32f3dc-poli-151111111407-lva1-app6892/85/Introduction-a-Marionette-11-320.jpg)
Introduction à Marionette
- 1. Backbone Meetup S01E01 1 Backbone Meetup
- 2. C’est quoi ? Ca apporte quoi ? Disclaimer : cette présentation n’est pas exhaustive! 2 Backbone Meetup
- 3. Backbone var UneVueBackBone = Backbone.View.extend({ template: _.template($(’#template').html()), tagName : 'tr', initialize: function (options) { this.model = options.model; this.listenTo(this.model, 'change', this.render); }, destroy: function () { delete this.model; }, render: function () { this.$el.html(this.template(this.model.toJSON())); return this; } }); Marionette var UneVueMarionette = Backbone.Marionette.ItemView.extend({ template: ’#template', tagName : 'tr', modelEvents : { 'change' : 'render' } }); Vues 3 Backbone Meetup
- 4. Vues • ItemView • CollectionView • CompositeView • Régions et Layouts 4 Backbone Meetup
- 5. var MyView = Backbone.Marionette.ItemView.extend({ template: "#some-‐template" }); var view = new MyView({ model : monModel }); var ColView = Backbone.Marionette.CollectionView.extend({ itemView: MyItemView }); var colview = new ColView({ collection : maCollection}); Var CompoView = Backbone.Marionette.CompositeView.extend({ template: '#some-‐template', itemView : MyItemView, itemViewContainer : 'tbody }); var compoView = new CompoView({ model : m, collection : c}); 5 Backbone Meetup
- 6. Layout et régions <script id="mon-‐premier-‐layout" type="text/template"> <div id="bloc-‐premier"></div> <div id="bloc-‐second"></div> </script> var AppLayout = Backbone.Marionette.Layout.extend({ template: "#mon-‐premier-‐layout", regions: { blocPremier: "#bloc-‐premier", blocSecond: "#bloc-‐second" } }); ... layout.blocPremier.show(maVuePremiere); layout.blocSecond.show(maSecondeVue); 6 Backbone Meetup
- 7. Application MyApp = new Backbone.Marionette.Application(); MyApp.addInitializer(function(options){ var myView = new MyView({ model: options.someModel }); MyApp.mainRegion.show(myView); }); MyApp.addInitializer(function(options){ new MyAppRouter(); Backbone.history.start(); }); • Initializers • Regions • Events MyApp.addRegions({ mainRegion: "#content" }); MyApp.vent.on("monEvent", function(data){ alert("Received", data); }); MyApp.start(); 7 Backbone Meetup
- 8. Du code! (et pas juste copié de la doc!) 8 Backbone Meetup
- 9. Events and callback methods • onShow • onBeforeRender, onRender • onBeforeClose, onClose Backbone.Marionette.ItemView.extend({ onRender: function(){ // manipulate the `el` here. it's already // been rendered, and is full of the view's // HTML, ready to go. } }); 9 Backbone Meetup
- 10. Template dynamique MyView = Backbone.Marionette.ItemView.extend({ getTemplate: function(){ if (this.model.get("foo")){ return "#some-‐template"; } else { return "#a-‐different-‐template"; } } }); 10 Backbone Meetup
- 11. Accès aux éléments du DOM Backbone.Marionette.ItemView.extend({ tagName: "tr", ui: { checkbox: "input[type=checkbox]" }, onRender: function() { if (this.model.get('selected')) { this.ui.checkbox.addClass('checked'); } } }); On s’en sert souvent 11 Backbone Meetup
- 12. Model events et collection events Marionette.ItemView.extend({ modelEvents: { // Item view et composite view "change": "modelChanged" }, collectionEvents: { // collection view et composite view "add": "modelAdded" } }); modelEvents: { "change": "handler1 handler2" // On peut en avoir plusieurs }, modelEvents: { "change": function () { // On inliner le handler } }, 12 Backbone Meetup
- 13. Template Helpers <script id="meetup-‐template" type="text/html"> Le <%= getName() %> c’est <%= message() %> </script> MyView = Backbone.Marionette.ItemView.extend({ template: "#meetup-‐template", templateHelpers: { getName: function(){ return this.name }, message: function(){ return " Génial!" } } }); model = new Backbone.Model({name: "Backbone meetup"}); view = new MyView({ model: model }); view.render(); //=> Le Backbone meetup c’est Génial! 13 Backbone Meetup
- 14. Plus sur les CollectionView buildItemView: function(item, ItemViewType, itemViewOptions){ if (item.get('someProperty')) { return new MyViewUn(); } return new MyView2(); } Construction dynamique de l’item view Vue particulière pour les collections vides Backbone.Marionette.CollectionView.extend({ emptyView: NoItemsView }); Evénements des enfants itemEvents: { "render": function() { // ... } } 14 Backbone Meetup
- 15. Encore du code! 15 Backbone Meetup
- 16. Et aussi… 16 Backbone Meetup
- 17. Behaviors var MyView = Marionette.ItemView.extend({ behaviors: { ValidateDate: { message: "La date de naissance n'est pas valide!" } } }); var ValidateDate = Marionette.Behavior.extend({ defaults: { "message": "Date non valide!" }, // behaviors have events that are bound to the views DOM events: { "blur input.date": "validateDate" }, validateDate: function() { // Validateion de la date et ajout du message dsi nécessaire } }); 17 Backbone Meetup
- 18. A retenir • Marionette est une librairie pour backbone • Plus précisément, c’est un ensemble d’utilitaires simplifiant la construction d’applications • En particulier Marionette fournie un ensemble de vues très très pratiques 18 Backbone Meetup
- 19. 19 Backbone Meetup Le site : http://marionettejs.com La Doc : https://github.com/marionettejs/backbone.marionette Code de la démo : https://github.com/rlemaire/bb-meetup-marionette