From 3071e800027a479fcdb967b26f2fcacb48de7198 Mon Sep 17 00:00:00 2001 From: Egeste Date: Wed, 24 Oct 2012 08:43:38 -0700 Subject: [PATCH 1/2] Added variant for closure-scoped sub/delegate views --- README.md | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index beb12af..16628e2 100644 --- a/README.md +++ b/README.md @@ -258,10 +258,10 @@ be defined as a separate template from the list itself. ### Solution -You can pass the template function for the partial as a parameter to the first +You can pass the template function for the partial as a parameter to the first template. -In this example, the function `itemTemplate` is passed onto the parameters for +In this example, the function `itemTemplate` is passed onto the parameters for `template()`. ``` javascript @@ -577,6 +577,26 @@ App.ChromeView = Backbone.View.extend({ [pep8]: http://www.python.org/dev/peps/pep-0008/ +### Variation: closure-scoped sub/delegate views + +In addition to making the instance of a sub or delegate view "private" by prepending an underscore to the variable name, you can also make the view definition, instance, or both private by scoping it within a closure with the parent view. + +``` javascript +(function() { + var TabView = Backbone.View.extend(/* ... */); // TabView is not accessible outside the closure + var tabs = new TabView; // tabs is not accessible outside the closure + App.ChromeView = Backbone.View.extend({ + render: function() { + tabView.setElement(this.el); + } + }); +})(); +``` + +Pattern originally described at [Egeste.NET][egeste_closure_scope] + +[egeste_closure_scope]: http://egeste.net/blog/2012/10/20/backbone-pattern-closure-scoped-sub-views/ + General patterns ================ From d54b71cfd242ded1fe1cdab3bc0b9a422fd7a3b9 Mon Sep 17 00:00:00 2001 From: Egeste Date: Wed, 24 Oct 2012 09:02:59 -0700 Subject: [PATCH 2/2] Added patterns for update chaining --- README.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 16628e2..e0a6966 100644 --- a/README.md +++ b/README.md @@ -593,10 +593,75 @@ In addition to making the instance of a sub or delegate view "private" by prepen })(); ``` -Pattern originally described at [Egeste.NET][egeste_closure_scope] +Variation originally described at [Egeste.NET][egeste_closure_scope] [egeste_closure_scope]: http://egeste.net/blog/2012/10/20/backbone-pattern-closure-scoped-sub-views/ +Update chaining +--------------- + +__The problem:__ How do you render a view to present all the information in its model, and only update specific elements as the model’s attributes change so that you don't have to completely re-render the view every time the model changes? + +__The solution:__ Create an update function for every model attribute you're going to present in the view, and have it return the view so it can be chained with other update functions. + +``` javascript +App.ChromeView = Backbone.View.extend({ + initialize: function() { + this.model + .on('change:foo', this.updateFoo, this) + .on('change:bar', this.updateBar, this) + }, + render: function() { + this.$el.html(/* ... */) + this.$('input.foo').datepicker(/* ... */) + return this + .updateFoo() + .updateBar() + }, + updateFoo: function() { + this.$('input.foo').val(this.model.get('foo')) + return this + }, + updateBar: function() { + this.$('.bar').text(this.model.get('bar')) + return this + } +}) +``` + +Pattern originally described at [Egeste.NET][egeste_update_chaining] + +[egeste_update_chaining]: http://egeste.net/blog/2012/10/24/backbone-pattern-chain-able-update-functions/ + +### Variation: chaining updates within updates for attributes with relationships to other attributes + +In the event that a model attribute changes that has implications for some other portion of the view, or possibly some relationship with another model attribute, you can chain the updates within each other. For example, if foo changing means that something in bar’s update function should execute, simply have foo execute & return the updateBar function. + +``` javascript +App.ChromeView = Backbone.View.extend({ + initialize: function() { + this.model + .on('change:foo', this.updateFoo, this) + .on('change:bar', this.updateBar, this) + }, + render: function() { + this.$el.html(/* ... */) + this.$('input.foo').datepicker(/* ... */) + return this.updateFoo() + }, + updateFoo: function() { + this.$('input.foo').val(this.model.get('foo')) + return this.updateBar() + }, + updateBar: function() { + this.$('.bar').text(this.model.get('bar')) + return this + } +}) +``` + +Variation originally described at [Egeste.NET][egeste_update_chaining] + General patterns ================