Backbone js içinde soyutlama mantığı

Question

Marionette kullanarak bir Backbone uygulama geliştiriyorum ve koddaki mantığı düzenlemek için biraz yardıma ihtiyacım var.

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

:

Şu Ben soyut Bu tekrarını önlemek istiyorsanız, gerçekten benzer bir mantık işlemek birkaç görüşlere sahip Etc

Not: handlePluginData aynı şeyi yapıyor, doSomethingWithResultN farklı ama birkaç param ile soyutlanabilir.

Yani sorular şunlardır: soyut Bu should ?, ben bir BaseView sınıftan uzanan ve orada mantığı ekleyerek düşündük, ancak daha iyi bir yol varsa bilmiyorum nasıl

• .

• Hesaplamayı işleyen bir özel Model sınıfı eklemek tamam mı? Bir süredir rails kullanıyorum ve veritabanında Model === Tablo için kullanıyorum.

Çok teşekkür ederim!

Answer 1

Backbone View sınıfının yeterince soyut olduğunu düşünüyorum. Tek yapmanız gereken, yeni Görünüm örneğini oluştururken farklı seçenekleri geçmek.

Ve hesaplama mantığını Görünüm'ün render yöntemine yerleştirdiğinizi buldum. Backbone, MVC tabanlı bir çerçeve olduğundan, mantık, ilgilenen Model yangın olayı olduğunda düzen oluşturma düzeninden sorumlu Model ve View register olay işleyicisine yerleştirilmelidir.

Kanaatimce, görünümünüzü hesaplayıp yeniden tanımlayan bir Model ekleyebilirsiniz.

Benim basit bir örnek:

1.Define hesaplama mantığı için cevap olan bir model:

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 Görünüm sınıfı:

Görünüm modeli için bir dinleyici kaydedecektir " sonuçta "veri değişimi olayı" ve atadığınız modele göre başlangıç ​​düzeni oluşturulur. Yeni Görünüm örneğini zaman

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 farklı seçenek modellemek için.

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.Artı-tek düğme tıklama olay işleyicisi: Görünüm nasıl görebiliyoruz

modeli değiştiğinde o düzeni var re-render.

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

Bunun sizin için yararlı olacağını umuyorum.