Astrazione logica in Backbone js

Question

Sto sviluppando un'applicazione Backbone utilizzando Marionette e ho bisogno di aiuto per organizzare la logica nel codice.

Attualmente ho un paio di vista in cui mi gestisco logica molto simile, voglio astratta questo per evitare la ripetizione:

Visualizzazione1

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

Nota: handlePluginData fare la stessa cosa, doSomethingWithResultN è diverso ma può essere estratto con pochi parametri.

Quindi le domande sono:

• Come dovrei astratto questo ?, ho pensato di estendere da una classe BaseView e aggiungendo la logica là, ma non so se c'è un modo migliore.

• È possibile aggiungere una classe personalizzata Model che gestisce il calcolo ?. Sto usando rails per un po 'e sono abituato a Model === Tabella nel database.

Grazie mille!

Answer 1

Penso che la classe Backbone View sia abbastanza astratta. Tutto quello che devi fare è passare diverse opzioni quando crei una nuova istanza View.

E ho scoperto che si posiziona la logica di calcolo nel metodo di rendering View. Poiché Backbone è un framework basato su MVC, la logica dovrebbe essere posizionata nel gestore di eventi del registro Model e View, responsabile del rendering del layout durante l'evento Fire del modello a cui è interessata la vista.

A mio parere, è possibile aggiungere un modello che gestisce calcola e ridefinisce la vista.

mio semplice esempio:

1.Define un modello che è rispondere per la logica di calcolo:

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 la classe View:

vista sarà registrare un listener per il modello " risultato "data change event e renderizza un layout iniziale in base al modello che hai assegnato.

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.Passare diverse opzioni da modellare quando si crea un'istanza di una nuova vista.

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 un pulsante gestore di eventi click:

Si potrebbe osservare come View ri-renderizzare è layout quando il modello viene modificato.

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

Spero che questo sia utile per voi.