Backbone jsのロジックを抽象化

Question

Marionetteを使用してBackboneアプリケーションを開発しています。コード内でロジックを整理するためにいくつかの助けが必要です。

現在、私は、私は繰り返しを避けるために、この抽象にしたい、私は本当に同様のロジックを扱ういくつかの景色を眺めることができます：

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); 
} 

その他

注：handlePluginDataは同じことをしますが、doSomethingWithResultNは異なりますが、いくつかのパラメータで抽象化することができます。

だから、質問は以下のとおりです。

• この私が抽象べき？私はBaseViewクラスから延び、そこにロジックを追加するのではと思ったが、良い方法があるかどうかはわからない方法。

• 計算を処理するカスタムModelクラスを追加しても問題ありません。私はしばらくの間railsを使用していました、私はModel ===データベースのテーブルに慣れています。

ありがとうございました！

Answer 1

私は、バックボーンビュークラスは十分に抽象的だと思います。新しいViewインスタンスを作成するときには、異なるオプションを渡すだけです。

そして、計算ロジックをViewのレンダリングメソッドに配置することがわかりました。バックボーンはMVCベースのフレームワークなので、ModelとViewレジスタイベントハンドラにロジックを配置する必要があります。このイベントハンドラは、ビューが関心のあるModel Fireイベントが発生したときにレイアウトを描画します。

私の意見では、計算してビューを再定義するモデルを追加することができます。

私の簡単な例：

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クラスを：計算ロジックのための対応です

1.Defineモデル

ビュー」モデルのリスナーを登録します結果 "のデータ変更イベントを生成し、割り当てたモデルに従って初期レイアウトをレンダリングします。

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.新しいビューをインスタンス化するときにモデル化するオプションが異なります。

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。プラスワンボタンのクリックイベントハンドラ：

モデルが変更されたときにViewがレイアウトをどのように再レンダリングするか見ることができます。

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

ご希望の場合は、こちらをご覧ください。