Backbone.js: The right way to view refactoring code?

Question

I am wondering where to place the general code for viewing the spine. For example, in my view of "NewPosts" I have the following:

createPost: (event) -> #... @collection.create attributes, #... error: @handleError handleError: (entry, response) -> if response.status == 422 #... 

This handleError function will be used among many different views ... I'm not sure about the best practice re: where to put this. Is there a basic equivalent of view helpers in which I can paste this? Any other attack methods?

Answer 1

NOTE. My CoffeeScript is rusty, so I answer this in JS, but the idea needs to be translated.

Obviously, one way to resolve this issue is to give all your views a parent class, and then put methods like handleError into this class. However, if you are looking for a more “mixin” as a way to add methods, you can also do this.

Baseline views are initialized with an argument to the extend method, for example:

 var MyView = Backbone.View.extend({ someMethod: function(){ doSomething();} }); 

This argument is not magical; it's just a JS object, so you can extend it with _.extend, for example:

 var myCommonMethods = { handleError: function ... } var MyView = Backbone.View.extend(_({ someMethod: function(){ doSomething();} }, myCommonMethods)); 

The advantage of this approach is that you can “mix” as many sets of methods as you want, whereas if you use the parent class, you are much more limited. However, the parent class approach is simpler:

 var BaseView = { handleError: function ... } var MyView = BaseView.extend({ someMethod: function(){ doSomething();} }); 

so it really depends on your specific needs.

Personally, in my code I use both approaches: I have BaseView, that all my views are expanding, and I use extremely general logic (for example, our template system, to which most of our representations apply). Then I have "mix-ins" of various sets of methods that add extra functionality.

For example, I have a mixed set of methods for all views that have a select element like their el; this allows these views to have some kind of base class for them, but it also has a common set of methods (for example, they all have a selectOption method that allows you to add the "selected" attribute to a specific option inside the el view). Hope this helps.

Answer 2

You can do this in several ways: Define the base view using this method, and then distribute all the other views from this view, not Backbone.View

 var Base = Backbone.View.extend({ handleError:function() {...} }); var MyView = Base.extend({ ... }); 

Or, extend existing views with an assistant

 var Helper = { handleError:function() {...} }; var View1 = Backbone.View.extend({ ... }); var View2 = Backbone.View.extend({ ... }); $.extend(View1, Helper); $.extend(View2, Helper); 

Answer 3

I would apply an error handling model that listens for the event. You can create your own events or use the default settings. I built a large, comprehensive backbone.js application, and it was very difficult in terms of architecture, until I learned how to use the event model. This has saved a lot of the relationship between the problems.

Create an event dispatcher and pass it as an argument to the view when it is initialized:

something like that:

 var dispatcher = {}; _.extend(dispatcher, Backbone.Events); dispatcher.on("event", function(msg) { // delegate to error handler }); view = new View([dispatcher: dispatcher]) view.dispatcher.trigger('event', {}) 

I found, using the event manager, it isolated my views, collections and models, which made it very easy to test. I could just fire events in the chrome console and watch how the various components behave in isolation. Providing the dispatcher with the dispatcher, it greatly facilitated debugging and my code cleaner.

Answer 4

Sorry, there is no code example, but one of the refactoring concepts is to move the general code to the base class so that all subclasses can reuse the code.

But I really like the Rimian idea, where your views subscribe to an error event from an event source, such as an object or dispatcher. This will cause all your views to separate from each other and handle the error when an error event is received.