Backbone js中的抽象邏輯

Question

我正在開發使用Marionette的Backbone應用程序，我需要一些幫助來組織代碼中的邏輯。

目前我有，我處理真的很相似的邏輯一些看法，我想摘要避免重複：

視圖1

onRender: function() { 
    var pluginData = this.$("selector1").plugin(); 
    var pluginResult = this.handlePluginData(pluginData); 
    this.doSomethingWithResult1(pluginResult); 
} 

視圖2

onRender: function() { 
    var pluginData = this.$("selector2").plugin(); 
    var pluginResult = this.handlePluginData(pluginData); 
    this.doSomethingWithResult2(pluginResult); 
} 

等

注意：handlePluginData做同樣的事情，doSomethingWithResultN它是不同的，但可以用幾個參數抽象。

所以問題是：

• 我應該怎樣抽象這個？我想從BaseView類擴展和增加的邏輯存在的，但我不知道是否有更好的方法。

• 可以添加處理計算的自定義Model類嗎？我一直在使用rails一段時間，我習慣於在數據庫中模型===表。

非常感謝！

Answer 1

我認爲Backbone View類是足夠抽象的。您只需在創建新的View實例時傳遞不同的選項。

我發現你把計算邏輯放在View的渲染方法中。由於Backbone是一個基於MVC的框架，因此邏輯應該放置在Model和View註冊事件處理程序中，該處理程序負責在Model激發哪個視圖感興趣的事件時對呈現佈局進行渲染。

在我看來，你可以添加一個模型來處理計算和重新定義你的視圖。

我的簡單示例：

1.定義一個模型，其是用於響應邏輯計算：

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類：

查看將登記偵聽模式「結果「數據更改事件並根據您分配的模型呈現初始佈局。

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。Plus-one按鈕點擊事件處理程序：

您可以觀察View在更改模型時如何重新呈現其佈局。

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

希望這對你有所幫助。