Backbone.Marionette - 連接頁面動作的最佳方式

Question

我們正在使用牽線木偶，並且爲$（document）.ready（）函數中的模板中存在的元素提供動作。我想知道是否有一種首選的方式來實現它 - 即將其移入模型或應用程序範圍內的某個位置。

簡單的例子

<script type="text/template" id="menu"> 
    <a href="javascript:void(0)" class="index-link"> 
</script> 


MyApp.module("Entities", function (Entities, MyApp, Backbone, Marionette, $, _) { 
    Entities.MenuModel = Backbone.Marionette.Model.extend({}); 
}); 

MyApp.module("Views", function (Views, QaApp, Backbone, Marionette, $, _) { 
    Views.MenuView = Backbone.Marionette.ItemView.extend({ 
     template: "#menu" 
    }); 
}); 

$(document).ready(function() { 

    $(window).load(function() { 
     $("html, body").animate({ scrollTop: $(document).height() }, 750); 
    }); 

    $(".index-link").on("click", function(e) { 
     $.ajax({ 
      url: "/someurl", 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      success: function (result) { 
       if (result.Status == false) 
        console.warn(result.Message); 
      }, 
      error: function (result) { 
       console.warn(result.Message); 
      } 
     }); 
    }); 
}); 

在這個例子中，我能看到窗口滾動功能無關我的模型，所以它看起來不錯，但不應該採取的措施通過在元素觸發了我模板在相關視圖內，尤其是如果成功函數可能返回我的模型需要的數據？

感謝您的期待！

Answer 1

您需要了解您的Marionette/Backbone實體具有的不同責任。責任通常遵循這些實體自然可用的信息。

在您的具體情況下，這意味着，DOM事件必須由包含這些DOM元素的視圖來處理。關於你的$('.index-link')，你必須首先轉換成Marionette.View的一個實例。您可以通過Marionette.ItemView/CollectionView/CompositieView或通過Marionette.Regions進行此操作，這些區域本身可以是Marionette.Layout的一部分。不管怎麼說，你的第一個認識必須是，這個邏輯必須在視圖中處理，而不是在模型中處理。因爲只有視圖瞭解DOM。該模型甚至不知道DOM是什麼...

例

看似相反的是我剛纔告訴你，我會寫「視圖邏輯」到集合。但是，請考慮一下，我正在視圖的上下文中執行「視圖邏輯」，而不是模型/集合！

var app = new Marionette.Application; 

// your dom contains a <nav /> element in its body 
app.addRegions({nav: 'nav'}); 

app.addInitializers(function() { 

    // collection containing nav links + the 'target', i.e. an onClick handler 
    var NavLinksCollection = new Backbone.Collection([ 
     { 
      title: 'Link 1', 
      onClick: function (event) { 
       // your ajax request 
       // this will be executed in the context of the view 
       // so you will have access to the Marionette.ItemView instance, with the element attached etc 
       // also, you have access to the model data, via the view's model property, i.e. `this.model` 
       // also to the collection the model belongs to, via this.model.collection 
       // finally, the event object is also available 
      } 
     }, 
     { 
      title: 'Link 2' 
     } 
    ]); 

    var NavView = Marionette.CollectionView.extend({ 
      itemView: Marionette.ItemView.extend({ 
       template: function (model) { 
        // maybe model is already serialized, then access via model.title 
        return $('<button>' + model.get('title') + '</button>'); 
       }, 
       events: { 
        'click': function (event) { 
         // see, although the actual code of the onClick event is contained in the collection, we execute that code in the context of the view, effectively making it code 'of' the view 
         this.model.get('onClick').call(this, event); 
        } 
       } 
      }), 
      collection: NavLinksCollections 
     }); 

    app.nav.show(new NavView); 

}); 

app.start();