javascript - Abstracting logic in Backbone js -

i'm developing backbone application using marionette , need organize logic in code.

currently have few views handle similar logic, want abstract avoid repetition:

view1

onrender: function() {     var plugindata = this.$("selector1").plugin();     var pluginresult = this.handleplugindata(plugindata);     this.dosomethingwithresult1(pluginresult); } 

view2

onrender: function() {     var plugindata = this.$("selector2").plugin();     var pluginresult = this.handleplugindata(plugindata);     this.dosomethingwithresult2(pluginresult); } 

etc

note: handleplugindata same thing, dosomethingwithresultn it's different can abstracted few params.

so questions are:

• how should abstract this?, thought of extending baseview class , adding logic there, don't know if there's better way.

• it's okay add custom model class handles calculation?. i've been using rails while , i'm used model === table in database.

thank much!

i think backbone view class abstract enough. have pass different options when create new view instance.

and found place calculating logic in view's render method. because backbone mvc-based framework, logic should place in model , view register event handler responsible rendering layout when model fire event view interested.

in opinion, add model handle calculate , redefine view.

my simple example:

1.define model respond logic calculating:

var mathmodel = backbone.model.extend({     result: 0,     initialize: function(){         console.log("calculate target: "+this.get("selector"));         console.log("calculate method: "+this.get("method"));         var number = this.handleplugindata();         this.dosomethingwithresult(number);     },     handleplugindata: function(){         return $(this.get("selector")).text();     },     dosomethingwithresult: function(number){         if(this.get("method")==="square"){             this.set({result:(number*number)});         }else{             this.set({result:(number*number*number)});         }      } }); 

2.redefine view class:

view register listener model "result" data change event , render initial layout according model assigned.

var abstractview = backbone.view.extend({         initialize: function(){             this.listento(this.model,"change",this.onmodelchange);             this.number = this.model.get("result");             this.render();         },         render: function(){             this.$el.html(this.number);          },         onmodelchange: function(model){             this.number = model.get("result");             this.render();         },         plusone:function(){             this.model.dosomethingwithresult(this.model.handleplugindata());         }     }); 

3.pass different options model when instantiate new view.

var view1 = new abstractview({el:"#result1",model:new mathmodel({selector:".square",method:"square"})}); var view2 = new abstractview({el:"#result2",model:new mathmodel({selector:".cubic",method:"cubic"})}); 

4.html:

<div id="select-target">     <span class="square">2</span>     <span class="cubic">2</span>     <button id="plus-one">+1</button> </div> <div id="result">     <span id="result1"></span>     <span id="result2"></span> </div> 

5.plus-one button click event handler:

you observe how view re-render it's layout when model changed.

$("#plus-one").click(function(){         $(".square").text(number($(".square").text())+1);         $(".cubic").text(number($(".cubic").text())+1);         view1.plusone();         view2.plusone();     }); 

hope helpful you.