視圖實際上應該做什麼？

在閱讀了過去幾周的Marionette和一般的MVC架構之後，我仍然不清楚MV *中的View究竟應該做什麼。我讀過的每個代碼示例，博客文章或教程都將不同數量的邏輯放在視圖中，或使用基本棄用的.on事件處理。視圖實際上應該做什麼？

我的直覺告訴我，該模型包含數據，視圖火災事件，以及控制器監聽並處理這些事件。我努力盡可能多地保留視圖中的邏輯，就像聽起來那樣怪異。

作爲一個例子，我創建了一個JSFiddle，只需在控制器中使用.listenTo即可將一個視圖切換到另一個視圖。我本來可以使用佈局和切換區域，但我希望儘可能小的代碼。

我在正確的軌道上嗎？應該如何看待只有呈現一個界面和吶喊事件，而不在View代碼中對它們中的任何一個進行操作？這個邏輯應該在控制器中嗎？或者這是否偏離了擁有精益控制器的原則？

謝謝。

下面是詳細代碼：

HTML

<script id="part1-template" type="text/template"> 
    <%= part1blurb %> <input type="button" id="goToPart2" value="OK" /> 
</script> 

<script id="part2-template" type="text/template"> 
    <%= part2blurb %> 
</script> 

<div id="main"></div>

型號

var MyModel = Backbone.Model.extend({ 
    defaults: { 
     part1blurb: 'This is part one', 
     part2blurb: 'This is part two' 
    } 
});

查看

var Part1View = Backbone.Marionette.ItemView.extend({ 
    model: new MyModel(), 
    template: '#part1-template', 
    triggers: { 
     'click #goToPart2': 'part1:done' 
    } 
}); 

var Part2View = Backbone.Marionette.ItemView.extend({ 
    model: new MyModel(), 
    template: '#part2-template' 
});

控制器

var PageController = Backbone.Marionette.Controller.extend({ 
    _views: { 
     part1: new Part1View(), 
     part2: new Part2View() 
    }, 
    initialize: function() { 
     this.listenTo(this._views.part1, 'part1:done', function() { 
      this._showPart(this._views.part2); 
     }); 
    }, 
    start: function() { 
     this._showPart(this._views.part1); 
    }, 
    _showPart: function(view) { 
     PageTest.mainRegion.show(view); 
    } 
});

應用

var PageTest = new Backbone.Marionette.Application(); 

PageTest.addRegions({ 
    mainRegion: '#main' 
}); 

var controller = new PageController(); 

controller.start();

來源

2013-10-25 siddhartha

我的經驗爲視圖的規則是，它仍然非常愚蠢的。

通常這裏是我的方法：

創建視圖控制器
聽在我看來，與listenTo
某些事件，一個DOM事件發生
我的處理方法只觸發和事件直到具有必要數據的控制器（在視圖中聚集的數據是我將擁有的最多邏輯）
控制器[R聽觸發的事件，然後處理更多激烈的商業邏輯（節能模式，獲取等）

我們的目標是能夠改變任何視圖結構或控制方法不依賴於彼此。它們僅通過觸發器中視圖傳遞的數據鬆散耦合。

來源

2013-10-25 14:50:16

那麼，你基本上會產生像我上面的例子代碼呢？ – siddhartha

視圖實際上應該做什麼？

回答

相關問題