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은 다르지만 약간의 매개 변수로 추상화 될 수 있습니다.

그래서 질문은 다음과 같습니다 : I 추상적이해야? 나는 BaseView 클래스에서 확장하고 거기에 논리를 추가 생각하지만, 더 나은 방법이 있는지 모르겠어요 어떻게

• .

• 계산을 처리하는 사용자 정의 Model 클래스를 추가해도됩니다. 나는 한동안 rails을 사용 해왔고 Model === 데이터베이스의 테이블에 익숙해졌습니다.

대단히 감사합니다.

Answer 1

백본 뷰 클래스는 충분히 추상적이라고 생각합니다. 새 View 인스턴스를 만들 때 다른 옵션을 전달하면됩니다.

그리고 계산 논리를 View의 렌더링 메소드에 배치 한 것으로 나타났습니다. Backbone은 MVC 기반 프레임 워크이기 때문에 View가 관심을 갖는 Model fire 이벤트가 발생할 때 레이아웃 렌더링을 담당하는 Model 및 View 레지스터 이벤트 핸들러에 로직을 배치해야합니다.

내 의견으로는, 계산하고보기를 재정의하는 모델을 추가 할 수 있습니다.

내 간단한 예 :

1.Define 계산 로직에 대한 응답입니다 모델 :

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

희망이 도움이 될 것입니다.